Setting style.iconColor of iconText component via code doesn't work

💬 App Building
1

Attempting to do this in JS:

myIconTextComponent.style.iconColor = '#cf3151'; // or 'danger' or 'Danger'

does not do anything (iconColor in style panel is "unlinked from token").

How can I programmatically set the icon color? (need to do it programmatically, since style.iconColor does not have an FX mode in the side panel)

Thanks in advance,
WonkyDonky

Edit: I'm on 3.114.11

2

Hey @WonkyDonky,

I’ve come up with an alternative solution to dynamically set the icon color via code.

Step 1: Create a temporary state with any initial color value.
Use this temporary state in the Icon Style → Icon Color field for your text/icon component.

image
image1875×686 59.7 KB

(Refer to the highlighted section in the screenshot)

Step 2:
Create a JavaScript query to update the icon color dynamically by modifying the temporary state.

image
image909×521 28.5 KB

Step 3: Trigger the JS query as needed. The color will update accordingly.

This may not be the exact approach you suggested, but it works perfectly on my end—feel free to give it a try!

1 Like
3

It's confusing, you're right—the styling section doesn't always show the FX icon, but those colours can all accept code to set their value.

If you edit a style in your component editor pane and click the "unlink from token" button (not the most intuitive name) you can add {{ code }} into this box where it has the hex string of the colour.

image
image291×123 4.13 KB

eg a ternary operator is usually helpful here:
{{ (error.value) ? theme.warning : theme.success }}

2 Likes
4

Thank you both, it is indeed working as if it was an fx field.