Icon
A single scalable vector icon from the icon library. Bind its color to a state tag through a map transform and it becomes a status indicator.
Reach for it when you need:
- Running/stopped/faulted indicators
- Decorating a label or a menu entry
Component name: Icon · Category: Display
In the palette: A single scalable vector icon from the icon library
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
icon | icon | Star | Pick from the icon library |
color | color | var(--widget-value) | — |
strokeWidth | number | 2 | — |
padding | number | 6 | — |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Do not use colour alone for anything safety-relevant — roughly 8% of men cannot separate your red from your green. Pair colour with a different icon or a label.