Icon
The Icon widget displays a single glyph from an icon font on screen.
Use it in menus, buttons, status indicators, and anywhere else you want to convey meaning visually.
Definition and role
The Icon widget draws one glyph from an icon font at the size and color you specify. Pick the glyph with a code point and a font family, then set its size, color, semantic label, and text direction.
- Category: Contents
- Default icon code point:
0xe000 - Default placement size (Sized Box): 36 × 36 (px)
Features
| Feature | Description |
|---|---|
| Icon display | Draws a single glyph from an icon font on screen. |
| Size and color | Set the icon's size (size) and color (color). |
| Glyph selection | Choose the glyph to show (iconData) with a code point and a font family. |
| Accessibility | Set the semantic label for screen readers (semanticLabel) and the text direction (textDirection). |
How to use
- Open the Contents category in the left widget palette.
- Drag the Icon item onto the canvas.
- In the Properties panel on the right, choose the icon to display (
iconData). - Adjust the size (
size) and color (color) as needed.
Properties
| Property | Description | Default | Value / Type |
|---|---|---|---|
iconData | Icon glyph to display (code point + font family) | 0xe000 | Icon setting |
size | Icon size | Not set | Number (px) |
color | Icon color | Not set | Color |
semanticLabel | Semantic label read out by screen readers | Not set | String |
textDirection | Text direction the icon is drawn in | Not set | rtl, ltr |
Notes and tips
Leave size and color unset and the icon inherits its values from the parent widget or the theme. Set both properties explicitly when you need a specific size or color.
An icon glyph is identified by two values: a code point and a font family. Pass both together when you change the icon from a script.
Learn more
For the full set of Widget Controls (Property, Method, and Event) that drive this widget from a script, visit Icon Widget Control.