图标

v-icon 组件提供了大量的，可以从各个方面覆盖到你的应用程序的字符形状。欲了解所有可用的图标，请访问官方的 Material Design Icons 图标 页面。要在页面中插入图标，只需使用 mdi- 前缀，再加上图标的名字即可。

使用

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

API

组件	描述
v-icon	主要组件

示例

属性

颜色

您可以通过颜色和其辅助名称，调整图标的颜色至更亮或者更暗的版本。

其他

按钮

图标可以在按钮内部使用，以强调按钮的动作。

Font Awesome

我们支持 Font Awesome 图标。只需在图标名称前加上 fa- 前缀即可。注意你要引入Font Awesome 图标到你的项目中。可以阅读安装页面，了解更多关于如何安装它的信息。

INFO

注意例子中使用了图标集的前缀，因为文档在默认情况下的图标集是 mdi。你可以参考这里，了解更多使用多个图标集的方法。

Material Design

我们也支持 Material Design 图标。了解更多关于安装的信息，请参考这里。

INFO

注意例子中使用了图标集的前缀，因为文档在默认情况下的图标集是 mdi。你可以参考这里，了解更多使用多个图标集的方法。

MDI SVG

你也可以可以通过使用 @mdi/js 包来导入你只想用的图标。阅读这里了解更多。

INFO

注意例子中使用了图标集的前缀，因为文档在默认情况下的图标集是 mdi。你可以参考这里，了解更多使用多个图标集的方法。

无障碍

图标可以传递各种有意义的信息，所以让它们尽可能传递多的受众是至关重要的。这里有两种可能的使用方式：

• 装饰性图标 仅仅只用于视觉上或者强调品牌效果。如果它们被移除，也不会影响用户对页面功能的理解。

• 语义化图标 则是用来传达意思的，而不仅仅是装饰。它们包含了那些只有图标而没有文字的控制部分——按钮，表单元素，切换等等。

DANGER

《WAI-ARIA 作者实践指南 1.1》指出，目前在各种浏览器中，aria-hidden="false" 的行为存在不一致。

INFO

WIP: 当你传递一个 label 属性时，我们的团队将更改组件，以不再渲染 aria-hidden="false"。

装饰性的字体图标

如果您的图标纯粹是装饰性的，您需要手动为您的每个图标添加属性，以便它们可以访问。被隐藏的(自动通过回义)

语义化的字体图标

如果你的图标是语义性的，那么你需要在元素中提供文字替代。而且需要适当的 CSS 来隐藏它，同时又能被无障碍技术访问到。

<v-icon aria-hidden="false">
  mdi-account
</v-icon>

装饰性的 SVG 图标

如果您的图标纯粹是装饰性的，您需要手动为您的每个图标添加 aria-hidden 属性(Vuetify 会自动完成这点)，以便它们可以访问。

语义化的 SVG 图标

为 v-icon 组件添加可访问属性，例如 role="img"，可以给予它们语义上的意义。

<v-icon aria-label="My Account" role="img" aria-hidden="false">
  mdiAccount
</v-icon>

<script setup>
import { mdiAccount } from "@mdi/js";

const icons = { mdiAccount }
</script>