Icon

Icon component for displaying various icons.

Basic Usage

Set the name attribute to use the built-in icons.

<wd-icon name="add-circle"></wd-icon>

Icon Color

Set the color attribute to customize the icon color.

<wd-icon name="add-circle" color="#0083ff"></wd-icon>

Icon Size

Set the size attribute to customize the icon size.

<wd-icon name="add-circle" size="20px"></wd-icon>
<wd-icon name="add-circle" size="25px"></wd-icon>
<wd-icon name="add-circle" size="30px"></wd-icon>

Custom Icon

Wot UI allows you to use custom icons in two ways:

1. Using Custom Font Icons

First, you need to define your own font icon library, and then set the class-prefix attribute to use your custom font icons.

<wd-icon class-prefix="my-icon" name="my-icon-name"></wd-icon>

2. Using Image Icons

Set the name attribute to an image URL to use image icons. The component automatically detects URLs containing /.

<wd-icon name="https://example.com/icon.png"></wd-icon>

Attributes

Attribute	Description	Type	Default	Version
name	Icon name or image URL	string	-	-
color	Icon color	string	-	-
size	Icon size	string | number	-	-
class-prefix	Custom icon class prefix	string	wd-icon	-
custom-style	Custom root node style	string	-	-

Events

Event Name	Description	Parameters	Version
click	Triggered when the icon is clicked	event: Event	-

External Style Classes

Class Name	Description	Version
custom-class	Root node custom class	-

Source Code

Documentation

• Component