Change Icon Color - Codeless

[Stefan_Jovanovic]

I was wondering if there’s a way to programatically/codeless change the icon color in the UI builder?
I can change the Icon itself, but I’m not sure how to change the icon color?

[mark-piller]

Have you try changing font color via css?

[Stefan_Jovanovic]

Not sure how to apply a css inside an onClick event?
With a custom code block? Is there any example that I can check out?

[mark-piller]

Put an indicator (can be bool value) into data model that color needs to change. The “class list logic” will be triggered, that’s where you can return updated class list.

[Stefan_Jovanovic]

Sorry but not sure exactly how would that work. I already have one event which will act as an indicator that the color needs to be changed. I’m not really sure how to change that color property of the icon tho.

[mark-piller]

Here’s my page:

The button’s click logic - sets a variable that controls the state of the icon color. Every click reverses the state (for demo purposes):

These are my CSS classes in an extension:

.dark {
  color: #000
}

.light {
  color: #0f0
}

And finally here’s the logic in the icon’s Class List Logic handler:

You can see the final result here:
https://www.backendless.us/api/files/ui-builder/containers/support/index.html?page=iconcolor

Regards,
Mark

[Stefan_Jovanovic]

Ohh so it works like that…
I’ve just tested it. One important thing, don’t try adding a custom default icon color in the properties panel, or else this approach will not work. Otherwise it works.