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

icon

string

required

The icon name should follow the format: [iconSetName]-[IconSetVariant]-[IconName] - url. The URL should start with http:// or https://.

color

string

optional

Non-URL icons are supported. The following preset colors will change with the theme: pink, blue, purple, cyan, green, magenta, red, orange, yellow, volcano, geekblue, lime, gold, and primary.

size

number

optional

Icon Size

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