Icon
#

The va-icon component allows you to use different icon fonts. By default Vuestic UI provides Material Design Icons.

Examples
#

Default
#

Basic usage of the component with different icon fonts.

Material Design Icons

Font Awesome 5

Ionic

Open in GitHub

Color
#

Set different colors using the color prop. You can either use a theme string or the HEX color value.

Open in GitHub

Size
#

Apply the size prop in order to make va-icon fit your needs.

Open in GitHub

Rotation and Flip
#

It is used to rotate and mirror the va-icon component.

Enable rotation
0
Open in GitHub

Spin
#

You can add animation of rotation of the icon using the property spin.

Open in GitHub

Text as icon
#

Using text prop is used to cover the text icon style.

Open in GitHub

Custom tag
#

With the tag prop you can attach the icon to another tag.

Open in GitHub

Accessibility
#

The component completely ignored by screen readers because of aria-hidden="true" attribute.

API
#

Props #

NameDescriptionTypesDefault
color

String

-

component

Object

-

flip

String

"off"

fontSizesConfig

Object

{
  "defaultSize": 1,
  "sizes": {
    "small": 0.75,
    "medium": 1,
    "large": 1.25
  }
}
name

String

""

preset

String

-

rotation

String | Number

-

size

String | Number

""

sizesConfig

Object

{
  "defaultSize": 48,
  "sizes": {
    "small": 32,
    "medium": 48,
    "large": 64
  }
}
spin

String | Boolean

-

tag

String

-

Css Variables #

NameDefault Value
--va-icon-vertical-align middle
--va-icon-user-select none