图标

v-icon 组件提供了大量字形，以提供应用程序各个方面的上下文。 有关所有可用图标的列表，请访问官方 Material Design Icons 页面。 要使用任何这些图标，只需使用 mdi- 前缀，后跟图标名称即可。

用例

图标有两个主题（浅色和深色）和五个不同的大小（x-small, small, medium （默认）, large, and x-large）。

Icons（图标） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Icons（图标） - 图2

示例

下面是一些简单到复杂的例子。

材料设计

Material Design 也被支持。有关如何安装的更多信息，请 navigate here

template style

  1. <template>
  2.   <v-container fluid>
  3.     <v-row justify="space-around" class="mb-2">
  4.       <span class="group pa-2">
  5.         <v-icon>home</v-icon>
  6.         <v-icon>event</v-icon>
  7.         <v-icon>info</v-icon>
  8.       </span>
  10.       <span class="group pa-2 teal">
  11.         <v-icon dark>folder_open</v-icon>
  12.         <v-icon dark>widgets</v-icon>
  13.         <v-icon dark>gavel</v-icon>
  14.       </span>
  15.     </v-row>
  17.     <v-row justify="space-around" class="mb-2">
  18.       <span class="group pa-2">
  19.         <v-icon medium>home</v-icon>
  20.         <v-icon medium>event</v-icon>
  21.         <v-icon medium>info</v-icon>
  22.       </span>
  24.       <span class="group pa-2 teal">
  25.         <v-icon medium dark>folder_open</v-icon>
  26.         <v-icon medium dark>widgets</v-icon>
  27.         <v-icon medium dark>gavel</v-icon>
  28.       </span>
  29.     </v-row>
  31.     <v-row justify="space-around" class="mb-2">
  32.       <span class="group pa-2">
  33.         <v-icon large>home</v-icon>
  34.         <v-icon large>event</v-icon>
  35.         <v-icon large>info</v-icon>
  36.       </span>
  38.       <span class="group pa-2 teal">
  39.         <v-icon large dark>folder_open</v-icon>
  40.         <v-icon large dark>widgets</v-icon>
  41.         <v-icon large dark>gavel</v-icon>
  42.       </span>
  43.     </v-row>
  45.     <v-row justify="space-around">
  46.       <span class="group pa-2">
  47.         <v-icon x-large>home</v-icon>
  48.         <v-icon x-large>event</v-icon>
  49.         <v-icon x-large>info</v-icon>
  50.       </span>
  52.       <span class="group pa-2 teal">
  53.         <v-icon x-large dark>folder_open</v-icon>
  54.         <v-icon x-large dark>widgets</v-icon>
  55.         <v-icon x-large dark>gavel</v-icon>
  56.       </span>
  57.     </v-row>
  58.   </v-container>
  59. </template>
  1. <style>
  2. .group {
  3.   display: flex;
  4.   flex: 1;
  5.   justify-content: space-around;
  6. }
  7. </style>

Icons（图标） - 图3

Font Awesome

Font Awesome 也被支持。只需使用 fa- 前缀图标名称。 请注意，您仍然需要在您的项目中包含 Font Awesome 图标。 关于如何安装它的更多信息，请导航到 installation page

template

  1. <template>
  2.   <v-row align="center" justify="space-around">
  3.     <v-icon>fas fa-lock</v-icon>
  5.     <v-icon>fas fa-search</v-icon>
  7.     <v-icon>fas fa-list</v-icon>
  9.     <v-icon>fas fa-edit</v-icon>
  11.     <v-icon>fas fa-tachometer-alt</v-icon>
  13.     <v-icon>fas fa-circle-notch fa-spin</v-icon>
  14.   </v-row>
  15. </template>

Icons（图标） - 图4

颜色

使用色彩辅助器，您可以改变标准的暗黑和明亮的主题的图标的颜色。

template

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-icon large color="green darken-2">mdi-domain</v-icon>
  5.     <v-icon large color="blue darken-2">mdi-message-text</v-icon>
  7.     <v-icon large color="purple darken-2">mdi-dialpad</v-icon>
  9.     <v-icon large color="teal darken-2">mdi-email</v-icon>
  11.     <v-icon large color="blue-grey darken-2">mdi-call-split</v-icon>
  13.     <v-icon large color="orange darken-2">mdi-arrow-up-bold-box-outline</v-icon>
  14.   </v-row>
  15. </template>

Icons（图标） - 图5

Full-Zip Vuetify Jacket

The Vuetify Full-Zip Fleece is a great lightweight jacket to keep on hand during the chilly season.

ads by Vuetify

](https://store.vuetifyjs.com/product/full-zip-vuetify-jacket?ref=vuetifyjs.com)

按钮

图标可以在按钮内部使用，以增加动作的重点。

template

  1. <template>
  2.   <div class="text-center">
  3.     <div>
  4.       <v-btn class="ma-2" color="primary" dark>Accept
  5.         <v-icon dark right>mdi-checkbox-marked-circle</v-icon>
  6.       </v-btn>
  8.       <v-btn class="ma-2" color="red" dark>Decline
  9.         <v-icon dark right>mdi-cancel</v-icon>
  10.       </v-btn>
  12.       <v-btn class="ma-2" dark>
  13.         <v-icon dark left>mdi-minus_circle</v-icon>Cancel
  14.       </v-btn>
  15.     </div>
  17.     <div>
  18.       <v-btn class="ma-2" color="orange darken-2" dark>
  19.         <v-icon dark left>mdi-arrow-left</v-icon>Back
  20.       </v-btn>
  22.       <v-btn class="ma-2" color="purple" dark>
  23.         <v-icon dark>mdi-wrench</v-icon>
  24.       </v-btn>
  26.       <v-btn class="ma-2" color="indigo" dark>
  27.         <v-icon dark>mdi-cloud-upload</v-icon>
  28.       </v-btn>
  29.     </div>
  31.     <div>
  32.       <v-btn class="ma-2" text icon color="blue lighten-2">
  33.         <v-icon>mdi-thumb-up</v-icon>
  34.       </v-btn>
  36.       <v-btn class="ma-2" text icon color="red lighten-2">
  37.         <v-icon>mdi-thumb-down</v-icon>
  38.       </v-btn>
  39.     </div>
  40.   </div>
  41. </template>

Icons（图标） - 图6

可点击

将任何单击事件绑定到 v-icon 将自动将光标更改为指针。

template script

  1. <template>
  2.   <v-card>
  3.     <v-toolbar
  4.       color="pink"
  5.       dark
  6.       dense
  7.       flat
  8.     >
  9.       <v-toolbar-title class="body-2">Upcoming Changes</v-toolbar-title>
  10.     </v-toolbar>
  11.     <v-card-text>
  12.       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  13.     </v-card-text>
  15.     <v-card-actions>
  16.       <v-spacer></v-spacer>
  17.       <v-icon
  18.         large
  19.         @click="next"
  20.       >
  21.         mdi-chevron-right
  22.       </v-icon>
  23.     </v-card-actions>
  24.   </v-card>
  25. </template>
  1. <script>
  2.   export default {
  3.     methods: {
  4.       next () {
  5.         alert('You clicked next!')
  6.       },
  7.     },
  8.   }
  9. </script>

Icons（图标） - 图7

MDI SVG

您只能手动导入使用 @mdi/js 软件包时使用的图标。 如果您想使用 VIcon 组件的 SVG 图标，请阅读如何使用 here。

template script

  1. <template>
  2.   <v-row
  3.     align="center"
  4.     justify="center"
  5.   >
  6.     <v-icon>{{ icons.mdiAccount }}</v-icon>
  7.     <div class="mx-2"></div>
  8.     <v-icon>{{ icons.mdiPencil }}</v-icon>
  9.     <div class="mx-2"></div>
  10.     <v-icon>{{ icons.mdiShareVariant }}</v-icon>
  11.     <div class="mx-2"></div>
  12.     <v-btn
  13.       color="primary"
  14.       depressed
  15.     >
  16.       <v-icon left>{{ icons.mdiDelete }}</v-icon>
  17.       Delete
  18.     </v-btn>
  19.   </v-row>
  20. </template>
  1. <script>
  2.   import {
  3.     mdiAccount,
  4.     mdiPencil,
  5.     mdiShareVariant,
  6.     mdiDelete,
  7.   } from '@mdi/js'
  9.   export default {
  10.     data: () => ({
  11.       icons: {
  12.         mdiAccount,
  13.         mdiPencil,
  14.         mdiShareVariant,
  15.         mdiDelete,
  16.       },
  17.     }),
  18.   }
  19. </script>

Icons（图标） - 图8