Possible to change color of icon without color field?

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

Hi Kevin, thanks a lot but I was looking for something similar to the status component:

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: