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.
API
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Applies the dark theme variant
Components.Inputs.props.disabled
Makes the icon large (36px)
Places the icon on the left, when used inside a button
Applies the light theme variant
Makes the icon medium (28px)
Places the icon on the right, when used inside a button
Specifies a custom font size for the icon
Makes the icon small (16px)
Makes the icon extra large (40px)
Examples
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.