Icon
An Icon component can be used to add icons(sourced from icon library). It supports events like on hover and on click.
Properties​
Properties | Description | Expected Value |
|---|---|---|
| Icon | Use this to choose an icon form the list of available icons. | You can also use the search bar in it to look for the icons. |
Events​
Event | Description |
|---|---|
| On hover | Triggers whenever the cursor is hovered over the icon. |
| On click | Triggers whenever the icon is clicked. |
Just like any other event on ToolJet, you can set multiple handlers for any of the above-mentioned events.
info
Check Action Reference docs to get the detailed information about all the Actions.
Component Specific Actions (CSA)​
Following actions of the component can be controlled using the component specific actions(CSA):
Actions | Description | How To Access |
|---|---|---|
| setVisibility() | Sets the visibility of the component. | Employ a RunJS query (for e.g., await components.icon1.setVisibility(false)) or trigger it using an event. |
| click() | Regulate the click on the icon. | Employ a RunJS query (for e.g., await components.icon1.click()) or trigger it using an event. |
Exposed Variables​
There are currently no exposed variables for the component.
General​
Tooltip: Set a tooltip text to specify the information when the user moves the mouse pointer over the component.
Devices​
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles​
Style | Description | Expected Value |
|---|---|---|
| Icon color | You can change the color of the Icon component by entering the Hex color code or choosing a color of your choice from the color picker. | |
| Visibility | This is to control the visibility of the component. | If {{false}} the component will not visible after the app is deployed. |
| Box shadow | This property adds a shadow to the component. | You can use different values for box shadow property like offsets, blur, spread, and the color code. |
info
Any property having fx button next to its field can be programmatically configured.