Become a patron
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.
Color
You can change the color of the icons as well, using color names, RGB, HEX, or Vuesax variables.
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
Background Color
You can change the background color with the property bg.
Rounded
To make the icon round, pass the property round.
TIP
You can also pass this as round=true. The two are equivalent.
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 |