A collection of SVG Material Design icons as single file components

vue-material-design-icons

This library is a collection of Vue single-file components to render Material
Design Icons, sourced from the MaterialDesign project.

It also includes some CSS that helps make the scaling of the icons a little
easier.

Getting started

1. Install the package

   $ npm install --save vue-material-design-icons
   

   OR

   $ yarn add vue-material-design-icons
   

2. Optional, but recommended Add the included stylesheet to your root JS
   file, usually index.js or main.js:

   import 'vue-material-design-icons/styles.css'
   

3. Import the icon, and declare it as a local component:

   import MenuIcon from 'vue-material-design-icons/menu.vue'
   
   components: {
     MenuIcon
   }
   

   OR

   Declare it as a global component:

   import MenuIcon from 'vue-material-design-icons/menu.vue'
   
   Vue.component('menu-icon', MenuIcon)
   

   Note Icon files are kebab cased, e.g. checkbox-marked-circle.vue, and
   their default name has -icon appended e.g. checkbox-marked-circle-icon.

4. Then use it in your template code!

   <menu-icon />
   

Icons

A list of the icons can be found at the
Material Design Icons website. The icons packaged here match the names
displayed on the website, such as ultra-high-definition, with the .vue
extension; that icon would be imported as
'vue-material-design-icons/ultra-high-definition.vue'.

Tips

• Use resolve in your Webpack config to clean up the imports:

  resolve: {
     alias : {
       "icons": path.resolve(__dirname, "node_modules/vue-material-design-icons")
     },
    extensions: [
      ".vue"
    ]
  }
  

  This will give you much shorter and more readable imports, like
  import Android from 'icons/android', rather than
  import Android from 'vue-material-design-icons/android.vue'. Much better!