Icon #
The va-icon
component allows you to use different icon fonts. By default Vuestic UI provides Material Design Icons.
Read more how you can use different icon libraries with Vuestic UI Icon Config
Examples #
Default #
Basic usage of the component with different icon fonts.
Material Design Icons
book book
Font Awesome 5
Ionic
Notice that Vuestic UI uses only Material Icons by default. You need to manually install additional libraries.
Color #
Set different colors using the color
prop. You can either use a theme string or the HEX color value.
Size #
Apply the size
prop in order to make va-icon
fit your needs.
Rotation and Flip #
It is used to rotate and mirror the va-icon
component.
Spin #
You can add animation of rotation of the icon using the property spin
.
Text as icon #
Using text
prop is used to cover the text icon style.
Custom tag #
With the tag
prop you can attach the icon to another tag.
Accessibility #
The component completely ignored by screen readers because of aria-hidden="true" attribute.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
color |
| - | |
component |
| - | |
flip |
|
| |
fontSizesConfig |
|
| |
name |
|
| |
preset |
| - | |
rotation |
| - | |
size |
|
| |
sizesConfig |
|
| |
spin |
| - | |
tag |
| - |
Css Variables #
Name | Default Value |
---|---|
--va-icon-vertical-align | middle |
--va-icon-user-select | none |