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.

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.

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.

1. Add a Data provider for the Inventory table.
2. Nest a Table underneath. Click Configure columns and Add all columns. Remove all columns except for Item Name, and Save.
3. Nest a Repeater block under the table. Select Item Tags as the datasource.

4. Nest an Icon component within the repeater block. This will display an icon for each tag.
5. Click Configure conditions to set the icon depending on the tag name. Use the duplicate button to make your life easier!

The Binding value in this instance is: {{ Tags Repeater block.Item Tags.value }}.

6. Set the icon Size to 'Large' and change the layout of the repeater block to 'Row layout'.

Result

👍

You can also use a similar process to dynamically set the color of the icons.