# Change-icon-color

**URL:** <https://discourse.nodered.org/t/change-icon-color/89430>\
**Category:** Dashboard\
**Created:** [11 July 2024 16:43 UTC](https://discourse.nodered.org/t/change-icon-color/89430 "2024-07-11T16:43:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [11 July 2024 16:43 UTC](https://discourse.nodered.org/t/change-icon-color/89430/1 "2024-07-11T16:43:04Z")

</div>

To change the colour of a button icon, I found this recommendation:

> [@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):
>
> So yes, it is possible. Not directly but via msg.ui\_control [{"id":"1e679465.35c78c","type":"ui\_button","z":"9038de34.04db3","name":"","group":"110f893b.a0f1d7","order":0,"width":0,"height":0,"passthru":false,"label":"home button","tooltip":"","color":"","bgcolor":"","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","x":450,"y":220,"wires":[[]]},{"id":"4a88b538.b3406c","type":"inject","z":"9038de34.04db3","name":"red icon","props":[{"p":"ui\_control.icon","v":"fa-home fa-2x color…

With this, unfortunately, the colour only changes when the TAB is reloaded. However, I need the immediate colour change in the node sequence on the TAB page.  
How handle it that way?

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [12 July 2024 14:59 UTC](https://discourse.nodered.org/t/change-icon-color/89430/2 "2024-07-12T14:59:22Z")

</div>

Here is a possible way to change the colour of the icon on a (pseudo)button.  
A template with "(function(scope) {..}" is used.  
Not the most elegant solution, but a possible way in the absence of any other approach.  
Any suggestions for alternatives or improvements are welcome.

![flow_pseudoButton](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3a0dd8e40ddf846542bb67239a45e41c72da8da7.png)  
 ![green](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2b46cd038c7bad879000b0bd6606cde8b81f3116.png)  
 ![red](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/3/7340e184a2c8a4715e1ab05c0f9bb0cdd76827bb.png)

```auto
[{"id":"7448b3047a9b8fb0","type":"ui_template","z":"10c56ac57c26b365","group":"110f893b.a0f1d7","name":"pseudoButtons","order":8,"width":"2","height":1,"format":"<!-- Pseudo Button and how to change icon color -->\n\n<div>\n <p ng-click=\"send({payload:jobcall('job2'),topic:'jobcalling'})\">\n <i id=\"job2i\" class=\"fa fa-download fa-lg\" style=\"color:green; cursor:pointer\" ></i>\n <span><small>Job 2</small></span>\n </p>\n</div>\n\n<script>\n (function(scope) {\n\n scope.jobcall = function(x) {\n msg = {};\n msg.arg = x;\n return msg;\n }\n \n scope.$watch('msg', function(msg) {\n if (msg.topic == \"change\") { \n $(\"#job2i\").css(\"color\", msg.payload);\n }\n }); \n })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1040,"y":460,"wires":[["2abe443f7871b7e5"]]},{"id":"efdc7e5a46aa2ffb","type":"inject","z":"10c56ac57c26b365","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":820,"y":540,"wires":[["7448b3047a9b8fb0"]]},{"id":"2abe443f7871b7e5","type":"debug","z":"10c56ac57c26b365","name":"debug 158","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1175,"y":460,"wires":[],"icon":"node-red/alert.svg","l":false},{"id":"e4d960bd5ab1a995","type":"inject","z":"10c56ac57c26b365","name":"red","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"change","payload":"red","payloadType":"str","x":810,"y":480,"wires":[["7448b3047a9b8fb0"]]},{"id":"4c0e7c785570b768","type":"inject","z":"10c56ac57c26b365","name":"green","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"change","payload":"green","payloadType":"str","x":810,"y":440,"wires":[["7448b3047a9b8fb0"]]},{"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:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 July 2024 14:59 UTC](https://discourse.nodered.org/t/change-icon-color/89430/3 "2024-07-26T14:59:25Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.