использование

Полный список доступных значков можно найти по адресу https://materialdesignicons.com/. При первой загрузке сайту может потребоваться несколько секунд, чтобы отобразить список предварительного просмотра значков внизу страницы. Наведите указатель мыши на нужный значок и запишите имя значка, отображаемое в верхней части всплывающей подсказки. Или щелкните предварительный просмотр значка, чтобы отобразить сведения о значке во всплывающем окне. Вы можете импортировать значок в свой компонент Vue, используя этот формат:

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

Например, на этом снимке экрана показана всплывающая подсказка для значка с именем auto-fix:

В вашем компоненте Vue вы должны импортировать значок следующим образом:

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

и объявите его как локальный компонент:

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

а затем используйте его в шаблоне вашего компонента:

<template>
  <AutoFixIcon/>
</template>

Руководство

1. Создайте новый проект vue-cli (например, с именем vue-md-icons-demo) и выберите настройку default при появлении запроса:

   vue create vue-md-icons-demo
   

2. CD в ​​только что созданный каталог проекта:

   cd vue-md-icons-demo
   

3. Установите пакет vue-material-design-icons из NPM:

   npm i -S vue-material-design-icons
   

4. В src/main.js импортируйте стили для иконок:

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

5. В src/App.vue (или в файле вашего компонента) импортируйте нужный значок для использования (см. Использование выше) и объявите его как локальный компонент. В этом случае мы импортируем значок с именем 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. В src/App.vue объявите элемент значка в шаблоне (т. е. <AirConditionerIcon/> в данном случае):

   <template>
     <AirConditionerIcon/>
   </template>
   

демонстрация

Официальное руководство по значкам Material Design: https://dev.materialdesignicons.com/getting-started/vue

Установить

npm install @mdi/js @jamescoyle/vue-icon

Импортируйте в свой проект

import SvgIcon from '@jamescoyle/vue-icon'
import { mdiAccount } from '@mdi/js'

Пример компонента:

<template>
  <svg-icon type="mdi" :path="path"></svg-icon>
</template>


<script>
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiAccount } from '@mdi/js'

export default {
    name: "my-cool-component",

    components: {
        SvgIcon
    },

    data() {
        return {
            path: mdiAccount,
        }
    }
}
</script>