# Change color on icon
**URL:** https://discourse.nodered.org/t/change-color-on-icon/44121
**Category:** Dashboard
**Created:** [13 April 2021 18:48 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121 "2021-04-13T18:48:27Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@lelle](https://discourse.nodered.org/u/lelle)
#### Post date: [13 April 2021 18:48 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/1 "2021-04-13T18:48:27Z")
Hello everybody!
I am new to both NR and this forum, so I hope someone can give me a solution.
I am using Rpi 3 with NR 0.19.5 , Sonoff-SV with Tasmota and Mosquitto.
I have mounted 2 magnetic sensors. One Opened and one Closed. If both are "0" the port is in the middle. If both are "1": ERROR. The sensors is on GPIO 4 and 5.
I have one Button that I change 4 icons and 4 colors from a function node.
PROBLEM:
If I leave NR for say 4hours and then change the state of the sensors, only the icon change. Not the color. Now I move something in the flow (move a node), so I have to deploy. And wow, now it works again!! ??!!
Can anyone explain or/and have a solution? I have made a simulator, that have the same problem. Here is the flow:
```auto
[{"id":"63163740.2d4508","type":"tab","label":"TESTBOARD","disabled":false,"info":""},{"id":"535a18ea.47f1f8","type":"ui_button","z":"63163740.2d4508","name":"","group":"89295a31.c00768","order":5,"width":"6","height":"3","passthru":false,"label":"","color":"{{color}}","bgcolor":"{{bgcolor}}","icon":"{{icon}}","payload":"","payloadType":"str","topic":"","x":750,"y":160,"wires":[[]]},{"id":"9c7f5b9e.f3e318","type":"function","z":"63163740.2d4508","name":"FixIconColor","func":"var k = msg.payload\nif (k===0) node.send({ui_control:{color:\"#FFFF00\",bgcolor:\"black\",icon:\"fa-4x fa-spinner fa-pulse\"}});\nif (k===1) node.send({ui_control:{color:\"#00FF00\",bgcolor:\"black\",icon:\"fa-4x fa-download\"}});\nif (k===2) node.send({ui_control:{color:\"#FF0000\",bgcolor:\"black\",icon:\"fa-4x fa-upload\"}});\nif (k===3) node.send({ui_control:{color:\"#FF0000\",bgcolor:\"black\",icon:\"fa-4x fa-exclamation-triangle\"}});\n\n/* 0=moving\n 1=closed\n 2=opened\n 3=error */\nmsg.payload = k;\nreturn [null];","outputs":1,"noerr":0,"x":470,"y":160,"wires":[["535a18ea.47f1f8"]]},{"id":"d1362218.b5d5e","type":"ui_button","z":"63163740.2d4508","name":"","group":"89295a31.c00768","order":2,"width":0,"height":0,"passthru":false,"label":"InMiddle","color":"","bgcolor":"","icon":"","payload":"0","payloadType":"num","topic":"","x":160,"y":220,"wires":[["9c7f5b9e.f3e318"]]},{"id":"2e15ddfb.c2d3e2","type":"ui_button","z":"63163740.2d4508","name":"","group":"89295a31.c00768","order":3,"width":0,"height":0,"passthru":false,"label":"Closed","color":"","bgcolor":"","icon":"","payload":"1","payloadType":"num","topic":"","x":160,"y":260,"wires":[["9c7f5b9e.f3e318"]]},{"id":"6bdd972a.905108","type":"ui_button","z":"63163740.2d4508","name":"","group":"89295a31.c00768","order":1,"width":0,"height":0,"passthru":false,"label":"Opened","color":"","bgcolor":"","icon":"","payload":"2","payloadType":"num","topic":"","x":160,"y":180,"wires":[["9c7f5b9e.f3e318"]]},{"id":"4161a979.0b0a18","type":"ui_button","z":"63163740.2d4508","name":"","group":"89295a31.c00768","order":4,"width":0,"height":0,"passthru":false,"label":"ErrOpenAndClosed","color":"","bgcolor":"","icon":"","payload":"3","payloadType":"num","topic":"","x":190,"y":140,"wires":[["9c7f5b9e.f3e318"]]},{"id":"89295a31.c00768","type":"ui_group","z":"","name":"GPortSimulator 1","tab":"1309dc77.e283d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"1309dc77.e283d4","type":"ui_tab","z":"","name":"TestBord","icon":"dashboard","order":1}]
```
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [13 April 2021 20:06 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/2 "2021-04-13T20:06:47Z")
Add debug nodes so that you can see what is going on. Then when it fails work out which bit is not doing what you expect by looking at the debug output.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [13 April 2021 20:08 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/3 "2021-04-13T20:08:12Z")
> [@lelle](#):
>
> If I leave NR for say 4hours
What do you mean by that?
---
### Author:  [@lelle](https://discourse.nodered.org/u/lelle)
#### Post date: [14 April 2021 07:24 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/4 "2021-04-14T07:24:06Z")
No "sensors" change, nobody presses the pushbuttons for say 4 hours.
---
### Author:  [@lelle](https://discourse.nodered.org/u/lelle)
#### Post date: [14 April 2021 07:34 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/5 "2021-04-14T07:34:50Z")
Thank you for quick answer!
 
A picture is worth a thousand words.
NR has been dormant since last night. I pushed "opened", that is the first picture. Then I moved the dbugnode a little bit, so I have to deploy. After that I pushed "opened" ones more, picture 2.
And I can not see any differens in dbug!
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [14 April 2021 10:31 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/6 "2021-04-14T10:31:33Z")
First off, you are on an old version of Node-RED (v0.19.5 - v0.19.0 was released in August of 2018).
What version of raspbian are you on? (from a termnial window enter:
```auto
cat /etc/os-release
```
copy and paste into a reply the results
I would suggest you:
1. backup your SD card (don't do anything else until you have done this!)
2. update node-red using the script: [Running on Raspberry Pi : Node-RED](https://nodered.org/docs/getting-started/raspberrypi)
3. test it again.
This will eliminate any issues that have already been fixed. Then we can go from there.
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [14 April 2021 10:38 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/7 "2021-04-14T10:38:37Z")
Also make sure that any extra nodes you have installed are up to date, particularly the dashboard.
---
### Author:  [@lelle](https://discourse.nodered.org/u/lelle)
#### Post date: [15 April 2021 07:41 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/8 "2021-04-15T07:41:54Z")
I have updated NR, but how can I update dashboard nodes??
Same problem remains still.
Soory, forgot this:
PRETTY\_NAME="Raspbian GNU/Linux 9 (stretch)"
NAME="Raspbian GNU/Linux"
VERSION\_ID="9"
VERSION="9 (stretch)"
VERSION\_CODENAME=stretch
ID=raspbian
ID\_LIKE=debian
HOME\_URL="[http://www.raspbian.org/](http://www.raspbian.org/)"
SUPPORT\_URL="[RaspbianForums - Raspbian](http://www.raspbian.org/RaspbianForums)"
BUG\_REPORT\_URL="[http://www.raspbian.org/RaspbianBugs](http://www.raspbian.org/RaspbianBugs)"
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [15 April 2021 08:26 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/9 "2021-04-15T08:26:25Z")
In the menu Manage Palette it will show nodes you have installed and give you the option of updating them. Unfortunately there is a bug in 1.3.2 of node red (that will be fixed in a new release today which means that it may not show you all the updates. If it does not say that node-red-dashboard is 2.28.2, and is not showing the Update option, then in a terminal go to your .node-red folder and run
`npm install node-red-dashboard@2.28.2`
---
### Author:  [@lelle](https://discourse.nodered.org/u/lelle)
#### Post date: [15 April 2021 20:30 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/10 "2021-04-15T20:30:57Z")
So far so good! I got other problems that I have worked with (Webradio), so tomorrow I will test simulator again.
I lost my dropdown menu on left side. The new one takes half mobile screen. Is it possible to get back dropdown menu??
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [15 April 2021 21:09 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/11 "2021-04-15T21:09:36Z")
> [@lelle](#):
>
> I lost my dropdown menu on left side. The new one takes half mobile screen.
Can you take a screenshot showing what you are seeing now and explain what it used to be like?
---
### Author:  [@MarkC](https://discourse.nodered.org/u/MarkC)
#### Post date: [15 April 2021 23:05 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/12 "2021-04-15T23:05:20Z")
I think I know what the issue is here - I had the same problem when I updated the dashboard nodes some months ago.
Basically, the ratio of space for the drop down title (on the left) vs the actual menu text / selected item (on the right) has changed.
Now if your drop down title is even 2 short words, the 2nd word gets cut off (and there is way too much space allocated for the actual menu text).
For example:
In addition, the very right corner of the drop down arrow is cut off.
---
### Author:  [@lelle](https://discourse.nodered.org/u/lelle)
#### Post date: [16 April 2021 08:32 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/13 "2021-04-16T08:32:01Z")
 The problem is still there and now the icon does not change either.
Now you see the menu (in left) instead of earlier picture, where it was dropdown menu.
I would appreciate getting the "dropdown menu" back.
Anybody, suggestions ??
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [16 April 2021 08:44 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/14 "2021-04-16T08:44:41Z")
Ensure it is set to click to show menu in the dashboard config site sidebar
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [16 April 2021 08:48 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/15 "2021-04-16T08:48:30Z")
Can you provide your flow? Export the entire flow and paste it into a reply. In order to make code more readable and importable it is important to surround your code with three backticks
`````
`like this`
`````
You can edit and correct your post by clicking the pencil icon.
See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)
---
### Author:  [@lelle](https://discourse.nodered.org/u/lelle)
#### Post date: [16 April 2021 09:15 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/16 "2021-04-16T09:15:14Z")
dceejay as you see in the picture I have lost the dashboard choice too !!
Here is the flow:
```auto
[{"id":"63163740.2d4508","type":"tab","label":"TESTBOARD","disabled":false,"info":""},{"id":"535a18ea.47f1f8","type":"ui_button","z":"63163740.2d4508","name":"","group":"89295a31.c00768","order":5,"width":"6","height":"3","passthru":false,"label":"","color":"{{color}}","bgcolor":"{{bgcolor}}","icon":"{{icon}}","payload":"","payloadType":"str","topic":"","x":750,"y":160,"wires":[[]]},{"id":"9c7f5b9e.f3e318","type":"function","z":"63163740.2d4508","name":"FixIconColor","func":"var k = msg.payload\nif (k===0) node.send({ui_control:{color:\"#FFFF00\",bgcolor:\"black\",icon:\"fa-4x fa-spinner fa-pulse\"}});\nif (k===1) node.send({ui_control:{color:\"#00FF00\",bgcolor:\"black\",icon:\"fa-4x fa-download\"}});\nif (k===2) node.send({ui_control:{color:\"#FF0000\",bgcolor:\"black\",icon:\"fa-4x fa-upload\"}});\nif (k===3) node.send({ui_control:{color:\"#FF0000\",bgcolor:\"black\",icon:\"fa-4x fa-exclamation-triangle\"}});\n\n/* 0=moving\n 1=closed\n 2=opened\n 3=error */\nmsg.payload = k;\nreturn [null];","outputs":1,"noerr":0,"x":470,"y":160,"wires":[["535a18ea.47f1f8","f99ebc1b.60c9"]]},{"id":"d1362218.b5d5e","type":"ui_button","z":"63163740.2d4508","name":"","group":"89295a31.c00768","order":2,"width":0,"height":0,"passthru":false,"label":"InMiddle","color":"","bgcolor":"","icon":"","payload":"0","payloadType":"num","topic":"","x":160,"y":220,"wires":[["9c7f5b9e.f3e318"]]},{"id":"2e15ddfb.c2d3e2","type":"ui_button","z":"63163740.2d4508","name":"","group":"89295a31.c00768","order":3,"width":0,"height":0,"passthru":false,"label":"Closed","color":"","bgcolor":"","icon":"","payload":"1","payloadType":"num","topic":"","x":160,"y":260,"wires":[["9c7f5b9e.f3e318"]]},{"id":"6bdd972a.905108","type":"ui_button","z":"63163740.2d4508","name":"","group":"89295a31.c00768","order":1,"width":0,"height":0,"passthru":false,"label":"Opened","color":"","bgcolor":"","icon":"","payload":"2","payloadType":"num","topic":"","x":160,"y":180,"wires":[["9c7f5b9e.f3e318"]]},{"id":"4161a979.0b0a18","type":"ui_button","z":"63163740.2d4508","name":"","group":"89295a31.c00768","order":4,"width":0,"height":0,"passthru":false,"label":"ErrOpenAndClosed","color":"","bgcolor":"","icon":"","payload":"3","payloadType":"num","topic":"","x":190,"y":140,"wires":[["9c7f5b9e.f3e318"]]},{"id":"f99ebc1b.60c9","type":"debug","z":"63163740.2d4508","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":750,"y":220,"wires":[]},{"id":"89295a31.c00768","type":"ui_group","name":"GPortSimulator 1","tab":"1309dc77.e283d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"1309dc77.e283d4","type":"ui_tab","name":"TestBord","icon":"dashboard","order":1}]type or paste code here
```
Thanks for taking time for me!
---
### Author:  [@lelle](https://discourse.nodered.org/u/lelle)
#### Post date: [16 April 2021 09:17 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/17 "2021-04-16T09:17:30Z")
Now I got to it (the inserted flow)
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [16 April 2021 09:59 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/18 "2021-04-16T09:59:57Z")
> [@lelle](#):
>
> I have lost the dashboard choice too
Make the debug pane wider to see all the buttons along the top to get at the dashboard options, or click the dropdown arrow at the right.
---
### Author:  [@lelle](https://discourse.nodered.org/u/lelle)
#### Post date: [16 April 2021 11:01 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/19 "2021-04-16T11:01:03Z")
It looks like this. Have I missed something in installation ? ? ?
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [16 April 2021 12:40 UTC](https://discourse.nodered.org/t/change-color-on-icon/44121/20 "2021-04-16T12:40:13Z")
Try clearing the browser cache (not just forcing a page refresh). Also try a different browser.
How did you install node-red?
Please stop node red then start it again in a terminal and post the resulting log here. Copy/paste not screen shot if possible please.
[Next page](https://discourse.nodered.org/t/change-color-on-icon/44121.md?page=2)