Icons
Superblocks comes with a native library of over 3,000 icons which can be used across components. The library is powered by Material Symbols.
Using Icons
Icons are available in Text, Input, Dropdown, Button, and Table components. In these components that natively support icons, set the icon properties below to configure the icon display.
In addition, icons can be used in a standalone Icon component.
Icon Properties
| Property | Description | Example Value |
|---|---|---|
| Icon | The icon to display | Select the icon in the form or use {{ icons.NAME }} in code (e.g., {{ icons.error }}). |
| Icon Position | The position of the icon, a string of either RIGHT or LEFT | RIGHT |
Icons in JavaScript
You can dynamically configure which icon is displayed by referencing icons in code mode using JavaScript. This is particularly relevant for table columns, as the icon to display is often dependent on the data in the column, as well as for buttons which may dynamically change based on other factors in the app.
To leverage this functionality, switch an icon field into <> Code mode and type {{ icons. }} to open the icon selector. Selecting an icon then injects the name of the icon into the binding. The example below uses the JavaScript conditional operator to set different icons based on the value in the status column of a table.
