Hi guys, I have a navigation component with icons. I am using those icons to display if that section is completed or not. I would like to use a color on those icons like red and green, is that possible somehow?
This is my handy way of color coding a multiple selection component:
In the component styles, set the Indicator Background:
Using this code for the mapping of the colors:
And then each choice is a different color:
1 Like
You could apply the same JS logic to conditionally set the color?
Hi Kevin, unfortunately I don't get how to target the icon color? This is how my code looks:
{{ variable.value === true ? "/icon:bold/interface-validation-check-circle" : "/icon:bold/interface-alert-information-circle" }}
Currently, the icon color is controlled by the color settings in the styles section:
Unfortunately, it sets all menu items to the same color. We have a feature request to support an option for defining the color of each menu item
A potential workaround is to have some logic in the highlight section for the menu items and then set the highlight color and non-highlighted color to be red/green. You can make the highlight background transparent if you don't want to use it:
