shadow
Icon picker allows the user to find and select an icon from a set of available icons. It includes text search for easier icon retrieval.
Use wje-icon-picker to improve readability, scannability, and contextual understanding of content.
Do not replace structured interactive data with media-only presentation when precision is needed.
Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.
- Compress media and use lazy loading in larger collections.
- Keep information priority consistent across cards/lists.
- Avoid duplicating the same meaning in icon and text without added value.
| Description | The selected icon's name. |
| Attribute | icon |
| Type | string |
| Default | - |
| Description | The number of icons displayed per page in infinite scroll. Default is 60. |
| Attribute | size |
| Type | number |
| Default | - |
| Name | Description |
|---|
wje-icon-picker:select | Emitted when an item is selected. |
| Description | Initializes the component. |
| Signature | () => void |
| Description | Gets the tags. |
| Signature | () => Promise<Array> |
| Description | Clears the icons container. |
| Signature | () => void |
| Description | Creates a debounced version of the provided function that delays its execution until after the specified delay has passed since the last time it was invoked. |
| Signature | (fn: Function, delay: number) => Function |
| Name | Description |
|---|
native | The native part of the component. |
anchor | The part representing the anchor button displaying the selected icon. |
picker | The picker part containing the search and icon selection interface. |
input | The input part for searching icons. |
| Name | Description |
|---|
--wje-color-picker-value | The default color value. |
--wje-color-picker-area | The background color of the color picker area. |
--wje-color-picker-swatch | The background color of the swatch picker. |
--wje-color-picker-size | The size of the icons in the picker. |
--wje-color-picker-radius | The border radius of the picker. |
No slots available for this component.