Icon

Currently, we directly support the following icon libraries: Material Design Icons (MDI), Remix Icon, and Lucide Icons.

Example

Code:

<Icon icon="material-two-tone-storefront"/>

Using Icons within Text

An icon inserted within text.

An icon <Icon icon="material-two-tone-storefront"/>  inserted within text.

Setting Icon Color

Example:

Code:

<Icon icon="material-two-tone-storefront" color="blue"/>

Setting Icon Size

Example:

Code:

<Icon icon="material-two-tone-storefront" size={25}/>

Using Icons within Components

Components like Collapse, Collapse Group, Card, Card Group, Steps, Notice, and Highlight all support the use of icons. Most components achieve this by adding the parameter "icon="material-two-tone-storefront".

Example:

Card with Icon

This is the card content.

Code:

<Card title="Card with Icon" icon="material-two-tone-storefront" > 
This is the card content.
</Card>

Parameter Description

Icon

Example#

Using Icons within Text#

Setting Icon Color#

Setting Icon Size#

Using Icons within Components#

Parameter Description#

Example

Using Icons within Text

Setting Icon Color

Setting Icon Size

Using Icons within Components

Parameter Description