Icon
The Icon component allows users to use visual symbols to represent ideas, objects, or actions.
Example
You can use the Icon component to add extra visual information for your components. For example, in this app:
- Users can add the date their holiday starts.
Note: The Icon component follows the WCAG 2.0 AA accessibility guidelines.
Properties
The following Icon component properties are available:
Main
Property | Description | Required |
---|---|---|
Component ID | Enter a unique name for the component. See Templating in components for more details. | Yes |
Icon | Select the icon from the drop-down menu. You can also type to search. | Yes |
Styles
Property | Description | Required |
---|---|---|
Color | Select a colour from the drop-down menu. | No |
Style | Select a style from the drop-down menu. | No |
Size | Select a size from the drop-down menu. | No |
Interactions
Property | Description | Required |
---|---|---|
Hidden | Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. | No |
Add rule | You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. | No |
Note: See Add rules to trigger properties for more information on setting rules for these properties.
Accessibility
Property | Description | Required |
---|---|---|
Aria label | Enter a text that allows assistive technology to attach a label to the component. | No |
Title | Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app. | No |