图标

v-icon组件提供了大量的字形来为应用程序的各个方面提供上下文。Vuetify图标利用Google的Material图标字体库。有关所有可用图标的列表,请访问官方的Material Icons页面。

用例

Icons come in two themes (light and dark), and four different sizes (standard, medium, large, and x-large). If you want to use SVG icons with VIcon component, read about using SVG icons with VIcon here.

API

v-icon
名称
color
默认值
undefined
类型
string

将指定的色彩应用与控件

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
disabled
默认值
false
类型
boolean

输入框是禁用的

名称
large
默认值
false
类型
boolean

设置图标为大型(36px)

名称
left
默认值
false
类型
boolean

在按钮内部使用时,把图标放置在左侧

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
medium
默认值
false
类型
boolean

设置图标为中型(28px)

名称
right
默认值
false
类型
boolean

在按钮内部使用时,把图标放置在右侧

名称
size
默认值
undefined
类型
number | string

设置元素的高度和宽度

名称
small
默认值
false
类型
boolean

设置图标为小型(16px)

名称
x-large
默认值
false
类型
boolean

设置图标为超大型(40px)

示例

Font Awesome

Font Awesome也被支持,只需简单地使用fa-前缀的图标名称即可。请注意,您仍然需要在您的项目中包含Font Awesome图标。

Material Design图标

Material Design图标也被支持,您只需简单地使用mdi-前缀的图标名即可。请注意,您仍然需要在您的项目中包含MDI图标。

色彩

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

按钮

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

Clickable

Binding any click event to v-icon will automatically change the cursor to a pointer.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore