Official Partner of
Nuxt
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

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

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