Icon
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.
Last updated