[TOC] ## 字体图标 Vuetify 为四种流行的图标字体库提供开箱即用支持—— 1. [Material Design Icons](https://materialdesignicons.com/), 2. [Material Icons](https://fonts.google.com/icons), 3. [Font Awesome 4](https://fontawesome.com/v4.7.0/) 4. [Font Awesome 5](https://fontawesome.com/) ## 示例 导入mdi 字体,通过访问,[Material Design Icons](https://materialdesignicons.com/), 可字节使用字体,如 ``` // src/plugins/vuetify.js import { createVuetify } from 'vuetify' import { aliases, mdi } from 'vuetify/iconsets/mdi' export default createVuetify({ icons: { defaultSet: 'mdi', aliases, sets: { mdi, }, }, }) ``` ``` <template> <v-icon icon="mdi-home" /> <v-icon icon="mdi-access-point-check" /> </template> ``` 使用多个图标集 ``` // src/plugins/vuetify.js import { createVuetify } from 'vuetify' import { aliases, fa } from 'vuetify/iconsets/fa' import { mdi } from 'vuetify/iconsets/mdi' export default createVuetify({ icons: { defaultSet: 'fa', aliases, sets: { fa, mdi, }, }, }) ``` 使用 ``` <template> <v-icon icon="fas fa-plus" /> // 将会渲染为 FontAwesome 的图标 <v-icon icon="mdi:mdi-minus" /> // 将会渲染为 MDI 的图标 </template> ```