# Change icon color by message

**URL:** <https://discourse.nodered.org/t/change-icon-color-by-message/56650>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [14 January 2022 11:35 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650 "2022-01-14T11:35:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![nosered1966](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nosered1966/32/52859_2.png) [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Post date:** [14 January 2022 11:35 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/1 "2022-01-14T11:35:54Z")

</div>

Hi all,

when I use the solution from @hotNipi in my Dashboard (see link below), the color of the icon is changing only after refreshing the Dashboard page.  
Is that normal?

What do I have to do if I want to change the color of the icon immediately without refreshing the Dashboard?

Thanks!  
Thomas

Continuing the discussion from [Change icon color without changing text color on button?](https://discourse.nodered.org/t/change-icon-color-without-changing-text-color-on-button/34975/3):

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 January 2022 11:48 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/2 "2022-01-14T11:48:14Z")

</div>

The `ui_template` node with the styles should be targeted to the site head.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/a/aa28c81d80806eff466877660ee2c70008343406.png)

---

<div class="post-metadata">

**Author:** ![nosered1966](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nosered1966/32/52859_2.png) [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Post date:** [14 January 2022 13:12 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/3 "2022-01-14T13:12:25Z")

</div>

You mean: Select entry "Added to ..." from drop down menu of template node?  
If I do so, nothing happens (don't remember how it was set before when also nothing happens).

For some reason it does not work here...  
🤔

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 January 2022 13:31 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/4 "2022-01-14T13:31:08Z")

</div>

Strange. Share that part of the flow ...

---

<div class="post-metadata">

**Author:** ![nosered1966](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nosered1966/32/52859_2.png) [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Post date:** [14 January 2022 13:32 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/5 "2022-01-14T13:32:45Z")

</div>

Well, it's a copy of yours:

```auto
[{"id":"2e1d71bd03cf9513","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"197439ee7ec8da1c","type":"ui_button","z":"2e1d71bd03cf9513","name":"","group":"110f893b.a0f1d7","order":0,"width":0,"height":0,"passthru":false,"label":"home button","tooltip":"","color":"","bgcolor":"","className":"","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","topicType":"str","x":530,"y":220,"wires":[[]]},{"id":"927ad427911e06d1","type":"inject","z":"2e1d71bd03cf9513","name":"red icon","props":[{"p":"ui_control.icon","v":"fa-home fa-2x coloredIcon red","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":340,"y":200,"wires":[["197439ee7ec8da1c"]]},{"id":"91e8ce7cf19887a4","type":"ui_template","z":"2e1d71bd03cf9513","group":"110f893b.a0f1d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n .coloredIcon.red{\n color :red;\n }\n .coloredIcon.blue{\n color :blue;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":520,"y":160,"wires":[[]]},{"id":"e3389cdb9cd24f47","type":"inject","z":"2e1d71bd03cf9513","name":"blue icon","props":[{"p":"ui_control.icon","v":"fa-home fa-2x coloredIcon blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":340,"y":260,"wires":[["197439ee7ec8da1c"]]},{"id":"110f893b.a0f1d7","type":"ui_group","name":"Default","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 January 2022 13:35 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/6 "2022-01-14T13:35:22Z")

</div>

Well in the flow you shared it is still set to "Widget in group". That's need to be changed.

OK also change the button configuration to be like this  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1b410e1c1c43afc4ee693d61c5382a9fce7e95a3.png)

---

<div class="post-metadata">

**Author:** ![nosered1966](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nosered1966/32/52859_2.png) [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Post date:** [14 January 2022 13:42 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/7 "2022-01-14T13:42:29Z")

</div>

The last hint was the right one {{icon}}! Thank you very much, now it works!

My copy of code was for sure also wrong, but only because I forgot to change before copying to this thread..

Thank you and have a nice day!  
🕶

---

<div class="post-metadata">

**Author:** ![nosered1966](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nosered1966/32/52859_2.png) [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Post date:** [14 January 2022 17:39 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/8 "2022-01-14T17:39:52Z")

</div>

@hotNipi Sorry for disturbing again..  
Based on your code I have done this, but it works not "stable".

The text is in general always toggling as expected, but the color of the icon does not.  
Sometimes the color is toggling correctly.  
Sometimes the color changes to the correct value if I switch to another Tab and back to Tab ToggleButton.  
Sometimes it works if template node - Template type is set to "Added to site..".  
Sometimes it works if template node - Template type is set to "Widget in group".

Sometimes it takes a long time until something happens...

I have no clue why this happens!

Can you or anybody else help me?

```auto
[{"id":"927ad427911e06d1","type":"inject","z":"2e1d71bd03cf9513","name":"red icon","props":[{"p":"ui_control.icon","v":"fa-home fa-2x coloredIcon red","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":100,"y":680,"wires":[["9af5b2c6.42c3d"]]},{"id":"91e8ce7cf19887a4","type":"ui_template","z":"2e1d71bd03cf9513","group":"110f893b.a0f1d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n .coloredIcon.red{\n color :red;\n }\n .coloredIcon.blue{\n color :blue;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":900,"y":420,"wires":[[]]},{"id":"e3389cdb9cd24f47","type":"inject","z":"2e1d71bd03cf9513","name":"blue icon","props":[{"p":"ui_control.icon","v":"fa-home fa-2x coloredIcon blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":100,"y":720,"wires":[["9af5b2c6.42c3d"]]},{"id":"29e7d45f.dea00c","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"toggle-me","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":870,"y":480,"wires":[["38a5d91c.0be77e"]]},{"id":"1b6fe3d1.5580a4","type":"switch","z":"2e1d71bd03cf9513","name":"","property":"toggle-me","propertyType":"flow","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":400,"y":700,"wires":[["8991bf63.f4d578"],["5fec9b00.abd0d4"]]},{"id":"8cddecf3.4a24f","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"toggle-me","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":870,"y":800,"wires":[["38a5d91c.0be77e"]]},{"id":"1e692860.33a6d","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"toggle-me","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":870,"y":540,"wires":[["38a5d91c.0be77e"]]},{"id":"dc371121.720208","type":"inject","z":"2e1d71bd03cf9513","name":"","repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":90,"y":480,"wires":[["29e7d45f.dea00c"]]},{"id":"5fec9b00.abd0d4","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":820,"wires":[["8cddecf3.4a24f","9af5b2c6.42c3d","629ab238496a40fa","c21e502359438c40"]]},{"id":"8991bf63.f4d578","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":600,"wires":[["1e692860.33a6d","9af5b2c6.42c3d","629ab238496a40fa","c21e502359438c40"]]},{"id":"38a5d91c.0be77e","type":"ui_text_input","z":"2e1d71bd03cf9513","name":"","label":"","tooltip":"","group":"110f893b.a0f1d7","order":3,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"","sendOnBlur":true,"className":"","topicType":"str","x":1240,"y":700,"wires":[[]]},{"id":"9af5b2c6.42c3d","type":"ui_button","z":"2e1d71bd03cf9513","name":"","group":"110f893b.a0f1d7","order":1,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"{{icon}}","payload":"true","payloadType":"bool","topic":"","topicType":"str","x":270,"y":700,"wires":[["1b6fe3d1.5580a4"]]},{"id":"f40c5c0.c964128","type":"comment","z":"2e1d71bd03cf9513","name":"At startup set default value (false)","info":"","x":160,"y":440,"wires":[]},{"id":"e62c42b2.ed0408","type":"comment","z":"2e1d71bd03cf9513","name":"if flow.state is true set it to false, if flow.state is false set it to true","info":"","x":720,"y":700,"wires":[]},{"id":"629ab238496a40fa","type":"debug","z":"2e1d71bd03cf9513","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":950,"y":660,"wires":[]},{"id":"c21e502359438c40","type":"debug","z":"2e1d71bd03cf9513","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"ui_control","targetType":"msg","statusVal":"","statusType":"auto","x":940,"y":740,"wires":[]},{"id":"110f893b.a0f1d7","type":"ui_group","name":"ToggleButton","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false,"className":""},{"id":"7179c13.0628d4","type":"ui_tab","name":"ToggleButton","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 January 2022 18:50 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/9 "2022-01-14T18:50:54Z")

</div>

If the flow variable does not exist then the switch will never change color. It should be set when NR starts or you do a deploy, but if it it is deleted it, the button push will not change the color since you test the flow variable.

Try this, change the switch node to this:

 ![Screen Shot 2022-01-14 at 1.48.37 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/2198604c164aaddd2b2668c1beb6ac61dd8d0300.png)  
if the flow variable does not exist, it will cause it to be created.

Also how have you set persistent storage? If you don't know, stop and start node-red and copy and past the start up log to a reply.

---

<div class="post-metadata">

**Author:** ![nosered1966](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nosered1966/32/52859_2.png) [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Post date:** [14 January 2022 21:00 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/10 "2022-01-14T21:00:25Z")

</div>

@zenofmud Hi Paul,

thank you for your answer. But it still does not work as let's say wanted:

If in template node 'Template type = Added to site ..."  
then after deploying it only works if Tab 'ToggleButton' is already active in the dashboard.  
If I change to another Tab and back to Tab 'ToggleButton' only the text is toggling although in the debug the content of msg.ui\_control is correct...

Regarding persistant storage:  
I do not know how to start and stop node-red and to copy the start up log. But I will try to find out...

Thx.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 January 2022 21:25 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/11 "2022-01-14T21:25:22Z")

</div>

Try this, add a 5 millisecond delay after the 'Change 2 rules' nodes like this:

 ![Screen Shot 2022-01-14 at 4.24.18 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d7f83b790db3ca9c7a58d0c4e53b05092ce83cbe.png)

---

<div class="post-metadata">

**Author:** ![nosered1966](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nosered1966/32/52859_2.png) [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Post date:** [14 January 2022 21:43 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/12 "2022-01-14T21:43:02Z")

</div>

Funny!  
I tried with this in the meanwhile.  
It's working perfect, but only directly after deploying as long as I do not change the Tab.  
After changing the Tab it is still toggling, but the icon in the button does not change anymore...

?

```auto
[{"id":"91e8ce7cf19887a4","type":"ui_template","z":"2e1d71bd03cf9513","group":"110f893b.a0f1d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n .coloredIcon.red{\n color :red;\n }\n .coloredIcon.blue{\n color :blue;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":520,"y":220,"wires":[[]]},{"id":"bcd9e2a053e660be","type":"toggle","z":"2e1d71bd03cf9513","name":"","onOffTopic":"switch","onValue":"true","onType":"bool","offValue":"false","offType":"bool","toggleTopic":"toggle","toggleValue":"1","toggleType":"num","passOnOff":"","x":490,"y":340,"wires":[["9dbec8b1c66d12f8"]]},{"id":"5738ccda20fa04eb","type":"debug","z":"2e1d71bd03cf9513","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":990,"y":340,"wires":[]},{"id":"4fd441ed768e6c73","type":"function","z":"2e1d71bd03cf9513","name":"","func":"msg.topic = \"toggle\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":340,"wires":[["bcd9e2a053e660be"]]},{"id":"ac7a79d06cdf6fdc","type":"ui_button","z":"2e1d71bd03cf9513","name":"","group":"110f893b.a0f1d7","order":3,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"{{icon}}","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":230,"y":340,"wires":[["4fd441ed768e6c73"]]},{"id":"9dbec8b1c66d12f8","type":"switch","z":"2e1d71bd03cf9513","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":610,"y":340,"wires":[["7696ec6e47e99416"],["268e2d27bf90fd3a"]]},{"id":"7696ec6e47e99416","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":260,"wires":[["5738ccda20fa04eb","b51488dab21dd7ef"]]},{"id":"268e2d27bf90fd3a","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":420,"wires":[["5738ccda20fa04eb","1d07e4a6bd3635ab"]]},{"id":"b51488dab21dd7ef","type":"delay","z":"2e1d71bd03cf9513","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":970,"y":260,"wires":[["ac7a79d06cdf6fdc"]]},{"id":"1d07e4a6bd3635ab","type":"delay","z":"2e1d71bd03cf9513","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":970,"y":420,"wires":[["ac7a79d06cdf6fdc"]]},{"id":"110f893b.a0f1d7","type":"ui_group","name":"ToggleButton","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false,"className":""},{"id":"7179c13.0628d4","type":"ui_tab","name":"ToggleButton","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/b/8b5d605e6ba333c5bf6f9c56e1b45c44c65f3996.png)

The msg.ui\_control is also toggling correct, but the color fo the button does not change anymore after switching the Tabs.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/fafe42ec45a2a58799709ea9c8fc4a35fde3df5f.png)

I think it has something to do with the template node:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a46286cbc2e43875727f18a1fabde94e33a102b.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 January 2022 22:05 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/13 "2022-01-14T22:05:54Z")

</div>

Styles if added to site head affect for all tabs. Otherwise they work only for tab they are set.

The dashboard widgets are dummy. They have no states, no memory so to say. Every time you change the tab or do refresh of dashboard page, the widgets are created from scratch. Having no memory they are rendered to the default - that is how they are configured.  
On top of that - there is replayMessage system - if server side recognizes that dashboard connects, it sends last known message to all widgets.

last known message may help if it contains something you need to have to tell to the widget to represent the state. But if not, the widget can just do it's default.

So it is up to the logic you create on server side to make dashboard widgets to have proper state in all conditions mentioned above.

There is `ui_control` node.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/f/5fde77ff474343c68a5a256533af5dca7ff16e47.png)

Using this you can catch events when dashboard connects or changes tabs. Using those events as trigger you can send relevant state messages to all dashboard widgets. This way you can hold all your (dynamic) widgets up to state. How the server side knows the state and retrieve it is up to you.

---

<div class="post-metadata">

**Author:** ![nosered1966](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nosered1966/32/52859_2.png) [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Post date:** [14 January 2022 22:25 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/14 "2022-01-14T22:25:53Z")

</div>

Thank you! A huge amount of information.  
I will sleep on it for a night or two or some more ...

And then I will try to use it and solve the issue.

Thank you!

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 January 2022 22:29 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/15 "2022-01-14T22:29:21Z")

</div>

Do search here in forum about ui\_control node (do not mix up with `msg.ui_control` which is totally different thing) and you'll find some examples for sure. Known it is hard to explain with few words so best to do is to examine examples and try to use it.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 January 2022 00:34 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/16 "2022-01-15T00:34:48Z")

</div>

By the way, in your latest flow, you do not need the `function` node, just change the `button` node to set the topic to the string `toggle`:  
 ![Screen Shot 2022-01-14 at 7.33.42 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0d1d77ef4b64a682a88a786383269035cd058996.png)

Also in the two change nodes, you set msg.payload to true in both change nodes.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [15 January 2022 13:01 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/17 "2022-01-15T13:01:53Z")

</div>

@nosered1966  
Thomas,  
Here is a working version of your flow. The ICON colorr will change and it you go to another tab and come back the color will show on the icon. Hopefully this is what you want.

 ![Screen Shot 2022-01-15 at 7.55.07 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/212006c6c95ed6105d9ffbe26b8412f185466e47.png)

```auto
[{"id":"72057b62.1ab02c","type":"tab","label":"Icon color change","disabled":false,"info":""},{"id":"402cb325.dc78ac","type":"ui_template","z":"72057b62.1ab02c","group":"a85cfd76.f4b748","name":"","order":1,"width":0,"height":0,"format":"<style>\n .coloredIcon.red{\n color :red;\n }\n .coloredIcon.blue{\n color :blue;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":940,"y":160,"wires":[[]]},{"id":"7da063b5.49c9d4","type":"toggle","z":"72057b62.1ab02c","name":"","onOffTopic":"switch","onValue":"true","onType":"bool","offValue":"false","offType":"bool","toggleTopic":"toggle","toggleValue":"1","toggleType":"num","passOnOff":"","x":250,"y":220,"wires":[["9f2fc6f0.65616"]]},{"id":"f8bd3e7a.07d1a","type":"debug","z":"72057b62.1ab02c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":730,"y":140,"wires":[]},{"id":"4f75d03d.c9df5","type":"ui_button","z":"72057b62.1ab02c","name":"","group":"a85cfd76.f4b748","order":3,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"{{icon}}","payload":"true","payloadType":"bool","topic":"toggle","topicType":"str","x":110,"y":220,"wires":[["7da063b5.49c9d4"]]},{"id":"9f2fc6f0.65616","type":"switch","z":"72057b62.1ab02c","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":390,"y":220,"wires":[["6c248e59.f05ee"],["4b5a4387.f875ec"]]},{"id":"6c248e59.f05ee","type":"change","z":"72057b62.1ab02c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":140,"wires":[["f8bd3e7a.07d1a","4f75d03d.c9df5","c93611c.5dbdef"]]},{"id":"4b5a4387.f875ec","type":"change","z":"72057b62.1ab02c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":300,"wires":[["4f75d03d.c9df5","1e8fe1e9.b2bd9e","c93611c.5dbdef"]]},{"id":"c93611c.5dbdef","type":"change","z":"72057b62.1ab02c","name":"Retresh the tab","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"tab\":\"\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":740,"y":220,"wires":[["dd6020dbd29b09cd"]]},{"id":"1e8fe1e9.b2bd9e","type":"debug","z":"72057b62.1ab02c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":730,"y":300,"wires":[]},{"id":"dd6020dbd29b09cd","type":"ui_ui_control","z":"72057b62.1ab02c","name":"","events":"all","x":940,"y":220,"wires":[[]]},{"id":"5564b44674ce3c7f","type":"inject","z":"72057b62.1ab02c","name":"initilise the icon","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"toggle","payload":"true","payloadType":"bool","x":160,"y":140,"wires":[["7da063b5.49c9d4"]]},{"id":"a85cfd76.f4b748","type":"ui_group","name":"ToggleButton","tab":"a85229e2.1e1148","order":13,"disp":true,"width":"6","collapse":false,"className":""},{"id":"a85229e2.1e1148","type":"ui_tab","name":"Icon Color Change","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![nosered1966](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nosered1966/32/52859_2.png) [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Post date:** [15 January 2022 21:46 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/18 "2022-01-15T21:46:00Z")

</div>

Hello Paul,

right now I think this is EXACTLY what I was looking for.  
Thank you so much for your concrete help and for modifying the flow!  
👏

Many thanks also to all the others who have helped me to work with Node-RED so far.  
What I like most about this forum is that you get concrete help and not just vague hints or other stupid remarks.  
😀

---

<div class="post-metadata">

**Author:** ![nosered1966](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nosered1966/32/52859_2.png) [@nosered1966](https://discourse.nodered.org/u/nosered1966)\
**Post date:** [16 January 2022 19:20 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/19 "2022-01-16T19:20:59Z")

</div>

@zenofmud

Hi Paul,

I already suspected it when I have written "right now I think..."

When using your code in my flow, it happens that the whole tab is refreshed when clicking the button, not only the icon in the button This is acceptable but not as expected.

Do you know if this can be changed?  
🤔

Thank you!  
Thomas

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [16 January 2022 19:35 UTC](https://discourse.nodered.org/t/change-icon-color-by-message/56650/20 "2022-01-16T19:35:30Z")

</div>

No it can’t be changed or yes it can but then the icon color will not change. You could keep the icon color neutral and change the background red or green

[Next page](https://discourse.nodered.org/t/change-icon-color-by-message/56650.md?page=2)