Icon
The Icon component uses the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 1500 symbols and glyphs for web-related actions. These icons are great, because they enable you to easily change color, size, and more via the Design panel. They are scalable vector graphics, which means that they look great on high-resolution displays.
To add an Icon component, click Add component
and search for "Icon", or locate it under the Basic section.

Adding an icon component
Within the Settings Panel under the Icon setting, a button will show the currently selected icon, or Pick icon
if no icon has been selected. Click the button to change the icon.
This will allow you to filter the Font Awesome library alphabetically, or search for keywords.
Using an icon as a button
Icons support the On Click event. You can define all of the Actions that a button can.

Define click actions in the settings panel
Tutorial: Displaying options as icons
In this tutorial, we will create an app with the sample data, and display an icon based on the Item Tags value of the Inventory table. To do this, we will make use of Conditional UI.
- Add a Data provider for the Inventory table.
- Nest a Table underneath. Click
Configure columns
andAdd all columns
. Remove all columns except for Item Name, andSave
. - Nest a Repeater block under the table. Select Item Tags as the datasource.

For each table row, iterate over each tag
- Nest an Icon component within the repeater block. This will display an icon for each tag.
- Click
Configure conditions
to set the icon depending on the tag name. Use the duplicate button to make your life easier!

Duplicate condition
The Binding value in this instance is: {{ Tags Repeater block.Item Tags.value }}
.
- Set the icon Size to 'Large' and change the layout of the repeater block to 'Row layout'.

Row layout
Result
You can also use a similar process to dynamically set the color of the icons.
Updated 10 months ago