[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> ```