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

Getting started

  1. Install the package

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


    $ 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: {


    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 />


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


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

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

    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!