Skip to content

Icon

Icon component for displaying various icons.

Basic Usage

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

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

Icon Color

Set the color attribute to customize the icon color.

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

Icon Size

Set the size attribute to customize the icon size.

html
<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.

html
<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 /.

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

Attributes

AttributeDescriptionTypeDefaultVersion
nameIcon name or image URLstring--
colorIcon colorstring--
sizeIcon sizestring--
class-prefixCustom icon class prefixstringwd-icon-
custom-styleCustom root node stylestring--

Events

Event NameDescriptionParametersVersion
clickTriggered when the icon is clickedevent: Event-

External Style Classes

Class NameDescriptionVersion
custom-classRoot node custom class-

Source Code

Documentation
Component

Released under the MIT License.

Released under the MIT License.