Vue-cli 3 - Material design icons installation

Question

How do I install vue-material-design-icons in my Vue CLI 3 project? I've been trying to use it without any good result, and I can't find any tutorial about it.

Answer 1

Usage

The full list of available icons are found at https://materialdesignicons.com/. On first load, the site may take a few seconds to display the icon preview list at the bottom of the page. Hover over the desired icon, and make note of the icon name shown at the top of the tooltip. Alternatively, click the icon preview to show the icon details in a popup. You can import the icon in your Vue component using this format:

import FooIcon from 'vue-material-design-icons/__ICON_NAME__.vue'

For example, this screenshot shows the tooltip for the icon named auto-fix:

In your Vue component, you would import the icon like this:

import AutoFixIcon from 'vue-material-design-icons/auto-fix.vue'

and declare it as a local component:

export default {
  name: 'my-component',
  components: {
    AutoFixIcon
  }
}

and then use it in your component's template:

<template>
  <AutoFixIcon/>
</template>

Tutorial

1. Create a new vue-cli project (e.g., named vue-md-icons-demo), and pick the default setup when prompted:

   vue create vue-md-icons-demo
   

2. CD into the newly created project directory:

   cd vue-md-icons-demo
   

3. Install vue-material-design-icons package from NPM:

   npm i -S vue-material-design-icons
   

4. In src/main.js, import the styles for the icons:

     import Vue from 'vue'
     import App from './App.vue'
   + import 'vue-material-design-icons/styles.css'
   

5. In src/App.vue (or in your component file), import the desired icon to be used (see Usage above), and declare it as a local component. In this case, we'll import the icon named air-conditioner:

     <script>
     import HelloWorld from './components/HelloWorld.vue'
   + import AirConditionerIcon from 'vue-material-design-icons/air-conditioner.vue'
   
     export default {
       name: 'app',
       components: {
   -     HelloWorld
   +     HelloWorld,
   +     AirConditionerIcon
       }
     }
   

6. In src/App.vue, declare the icon element in the template (i.e., <AirConditionerIcon/> in this case):

   <template>
     <AirConditionerIcon/>
   </template>
   

demo