Change-icon-color

[gNeandr]

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

Change icon color without changing text color on button?

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?

[gNeandr]

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.

[{"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}]