VIcon API

Props

name	type	default
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`disabled`	boolean	false
Removes the ability to click or target the component.
`end`	boolean	false
Applies margin at the start of the component.
`icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Apply a specific icon using the v-icon component.
`opacity` New in v3.8.0	string \| number	undefined
Sets the component’s opacity value
`size`	string \| number	'default'
Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: x-small, small, default, large, and x-large.
`start`	boolean	false
Applies margin at the end of the component.
`tag`	string \| (new () => any) \| FunctionalComponent	'i'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.

Slots

never

`default`
The default Vue slot.

SASS Variables

name	default
`$icon-disabled-opacity`	0.38
`$icon-left-margin-left`	8px
`$icon-letter-spacing`	normal
`$icon-line-height`	1
`$icon-margin-end`	8px
`$icon-margin-start`	8px
`$icon-size`	1em
`$icon-sizes`	tools.map-deep-merge( ( 'x-small': 1em, 'small': 1.25em, 'default': 1.5em, 'large': 1.75em, 'x-large': 2em, ), $icon-sizes )
`$icon-text-indent`	0
`$icon-vertical-align`	middle

#VIcon API