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. Add a Repeater nested inside the data provider.

3. Nest an Icon component within the repeater block. This will display an icon for each tag.

   

4. Select the icon component on the far right of the screen. You should see its settings.

5. Click the conditions tab

   

6. Click the no conditions set button, this will open a drawer were you can configure your conditions

7. Click the Add condition button to create your conditions. In our case, we are going to use the update setting option. This will allow us to dynamically change the icon based on the inventory table's tag values. (Use the duplicate button to make your life easier!)

   

Result