Custom Pack Icons #
Xbase provides the custom icon packs for Oruga icon element such as from FontAwesome, Material Design, Singapore Govtech Design System, and Xbase custom icons.
How To Use The Custom Icon Pack #
There are two props that need to be filled to use the custom icon pack, first is :pack and second is :icon.
Props: :pack #
The first prop :pack is the abbreviate name of the icon font based on its CSS Class in the icon font. The list can seen below:
- SGDS Icons ->
sgds-icon - Xbase Icons ->
xb - Material Design Icons ->
mdi - Font Awesome Icons ->
fa
Props: :icon #
The second prop :icon is the name of the icon without its prefix. In SGDS Icons, you will see that they provide the full name with prefix sgds-icon-. This also occurs in Font Awesome icon list preview with prefix fa- or fas-. Just put the name behind the prefix as input to :icon.
By following the explanation above, you can write in your code like the example below (using Xbase Icons), The list of available icons can be seen in these link below:
Custom Icon Pack #
XbaseUI Icon
FontAwesome Icon