Renders a font icon in the desired font library
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.
You can change the color of the icons as well, using color names, RGB, HEX, or Vuesax variables.
You can change the size of the Avatar with the property size
the allowed values are:
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
You can change the background color with the property bg
.
To make the icon round, pass the property round
.
TIP
You can also pass this as round=true
. The two are equivalent.
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 |