Possible to change color of icon without color field?

[Rupur]

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?

[khill-fbmc]

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:

[Rupur]

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

[khill-fbmc]

You could apply the same JS logic to conditionally set the color?

[Rupur]

@khill-fbmc

et 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"  }}

[Tess]

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

[Tess]

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:

[Marcelo_Avalos]

I found a work around

I tried with the Icon but it works with navigation too

First you need to select any custom color, this way the style color section is editable

Then you can place your code, for example I used this for app version
{{
${appVersion.value}.trim() === ${getAppVersion.data.version?.[0]}.trim()
? "#22c55e"
: "#ef4444"
}}

[Tess]

Thanks for sharing, @Marcelo_Avalos!