Icon

Renders a font icon in the desired font library

Default

To use the icon, use the vs-icon component. For the main parameter, pass the icon property that determines which icon to show. By default, the icon uses the Google Material Icons font library. Another library can be selected by passing the css class/classes for the library to icon-pack. Only the Material Icons library is bundled with the framework. Other libraries will have to be included implicitly.

TIP

Vuesax uses the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.

FontAwesome and other fonts libraries are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.

mood child_care pets android polymer

Color

You can change the color of the icons as well, using color names, RGB, HEX, or Vuesax variables.

mood child_care pets android polymer

Size

You can change the size of the Avatar with the property size the allowed values ​​are:

  • large
  • small
  • Custom measure

TIP

In the example the last icon has the custom size of 75px the added value will be the icon's height and width and text-size

mood child_care pets android polymer

Background Color

You can change the background color with the property bg.

mood child_care pets android polymer

Rounded

To make the icon round, pass the property round.

TIP

You can also pass this as round=true. The two are equivalent.

mood child_care pets android polymer

API #

Name Type Parameters Description default
icon String Determines the icon
icon-pack String Determines the icon pack. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. material-icons
color String Vuesax color presets, RGB, HEX, html color presets Determines the icon pack. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. black
bg String Vuesax color presets, RGB, HEX, html color presets Sets the background color
size String small, medium, large, custom measure(75px, 3rem, 2em) Sets the size of the icon 1rem
round Boolean Makes the background round. false
click Function a function to be executed on click of the icon