Icon

The Icon component provides a large set of glyphs to provide context to various aspects of your application.

info

For more details about Vuetify’s usage of Icon component, click Icon page.
For more prop explanations, click Vuetify Icon API page.

Props

Attribute	Description	Type	Default
dark	Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.	boolean	false
disabled	Disable the input.	boolean	false
large	Makes the component large.	boolean	false
small	Makes the component small.	boolean	false
tag	Specifies a custom tag to be used.	string	'i'
xLarge	Makes the component extra large.	boolean	false
xSmall	Makes the component extra small.	boolean	false
text	Name of Icon.	string	'mdi-home'
visible	Visibility of Icon component.	boolean	true

Events

Attribute	Description
click	where the actions to be performed when clicked are indicated

Usage of Material Design Icons

The icons in Material Design Icons can be used. The icons in this address can be used by adding the mdi- prefix in front of any selected icon in the text property of the Icon component.

• In order to use the mdi-alert-circle icon, click the "Advanced Export" button after selecting the icon.

• You can use the icon suffix in "Custom Name" in the opened field as mdi-{{suffix}}

For spinning icons, add mdi-spin class to the text property.

Samples QJson

Icon_Samples