Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 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

Color of the component (theme string or HEX string).

String

-

component

Allows to use the svg component as an icon

Object

-

flip

Specifies mirror image relative to horizontal and vertical planes. "off", "horizontal", "vertical" and "both" values are available

String

"off"

fontSizesConfig

Provide a set of sizes for fonts as a global component specific setting.

Object

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

name represents icon name which will be used by Icons Config.

String

""

preset

Named preset combination of component props.

String | Array

-

rotation

Rotates a component by a degree value

String | Number

-

size

Specify size for component. "small", "medium", "large" sizes are available. If you want more control, you can provide number (will be used as px) or string value (rem and px sizes are supported).

String | Number

""

sizesConfig

Provide a set of sizes as a global component specific setting.

Object

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

Starts rotation animation

String | Boolean

-

tag

Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (ul > li and tr > td etc.).

String

-

Css Variables #

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

Change log #

v1.8.0

  • To make icons looks better within text we changed default icon size is changed to 18px (or 1rem), small changed to 14px, medium to 18px, large to 24px