Icon

The Icon component is used to display information visually within your apps. Enum values can be linked to Icons during their definition, and Icons can be otherwise used to display information in an intuitive way. These icons can be selected from within our internal library.

An example setup of an Icon is showcased in our Showroom! You may view a demo and access how it was set up using Appfarm Create. If you do not have access, you may register here.

Badge

A common use for the Icon component is to combine it with a Badge. This badge can be used to display a numerical or String value to the user. For example, in an app with built-in notifications, a bell icon can be used with a Badge that displays the number of new notifications the logged-in user has. Alternatively, in an e-commerce app, a cart icon can be used with a Badge to display the number of items currently in the cart.

The Badge is automatically hidden if the output is 0 or an empty string.

Conditional Properties

The Badge color, Icon, and Icon Colour can all be changed during runtime based on a condition. For instance, the Icon can be displayed in the "Error" color (red) if a rating is under 25%.

On Click

Icons support On Click functionality to link the UI component to an action. Icon Buttons can also be used to achieve this functionality, which is recommended.