Icon

The v-icon component provides a large set of glyphs to provide context to various aspects of your application. Vuetify icons utilize Google's Material Icons font library. For a list of all available icons, visit the official Material Icons page.

Utilização

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
Nome
color
Padrão
undefined
Tipos
string

Components.Icons.

Nome
dark
Padrão
false
Tipos
boolean

Components.Icons.

Nome
disabled
Padrão
false
Tipos
boolean

Components.Icons.

Nome
large
Padrão
false
Tipos
boolean

Components.Icons.

Nome
left
Padrão
false
Tipos
boolean

Components.Icons.

Nome
light
Padrão
false
Tipos
boolean

Components.Icons.

Nome
medium
Padrão
false
Tipos
boolean

Components.Icons.

Nome
right
Padrão
false
Tipos
boolean

Components.Icons.

Nome
size
Padrão
undefined
Tipos
number | string

Define a altura e a largura do elemento

Nome
small
Padrão
false
Tipos
boolean

Components.Icons.

Nome
x-large
Padrão
false
Tipos
boolean

Components.Icons.

Exemplos

Font Awesome

Font Awesome is also supported. Simply use the fa- prefixed icon name. Please note that you still need to include the Font Awesome icons in your project.

Material Design Icons

Material Design Icons is also supported. Simply use the mdi- prefixed icon name. Please note that you still need to include the MDI icons in your project.

Color

Using color helpers you can change the color of an icon from the standard dark and light themes.

Buttons

Icons can be used inside of buttons to add emphasis to the action.

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