# Material Design icon defaults to transparent background

**URL:** <https://discourse.nodered.org/t/material-design-icon-defaults-to-transparent-background/59425>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [6 March 2022 04:11 UTC](https://discourse.nodered.org/t/material-design-icon-defaults-to-transparent-background/59425 "2022-03-06T04:11:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pmobley](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@pmobley](https://discourse.nodered.org/u/pmobley)\
**Post date:** [6 March 2022 04:11 UTC](https://discourse.nodered.org/t/material-design-icon-defaults-to-transparent-background/59425/1 "2022-03-06T04:11:56Z")

</div>

Hello all,

I am having a hard problem to solve. I don't think that it should be difficult.

So basically, I have a material design icon that defaults to a transparent background when the flow first loads. However, when I refresh the browser on that flow, the icon displays the correct color which is white.

Now, if I use my navigation buttons to switch to a different flow and back, the icon is again with the transparent background.

I am not sure if this is reproducible on other dashboards. however, I have attached some sample code of what I am doing along with some pics.

Also I should note that I tried to add in a remedy to this where I have a template node that will send out a message to set the color of the icon on start up. However, I have noticed that the message does not get sent out at all.

Please let me know if anyone has had a similar issue to this and how I can solve it.

` [{ "id": "95cb52d6d488839f", "type": "function", "z": "6cad017069b129d8", "g": "97c472b7c6b71f5d", "name": "Toggle Value", "func": "var state = context.state | false;\n\n// If this function node was triggered by the button, then invert the state variable\n// Otherwise, set the state based on the payload input value\nif (msg.payload == \"press\")\n state = !state\nelse\n state = (msg.payload == \"on\");\n\n// Set the button graphics based on the current state\nif (state == true)\n{\n msg.color = \"green\";\n msg.state = \"on\";\n}\nelse\n{\n msg.color = \"gray\";\n msg.state = \"off\";\n}\n\ncontext.state = state;\n\nif (msg.payload == \"press\")\n return [msg, msg];\nelse\n return [msg, null];", "outputs": 2, "noerr": 0, "initialize": "// Code added here will be run once\n// whenever the node is started.\nvar state = context.state | false;\n\nmsg = {};\n\nif (state == true)\n{\n msg.color = \"green\";\n msg.state = \"on\";\n}\nelse\n{\n msg.color = \"white\";\n msg.state = \"off\";\n}\n\nmsg,payload = state\n\nreturn [msg, null];", "finalize": "", "libs": [], "x": 530, "y": 240, "wires": [[ "9ffb312d59fc0c97", "bb84009f48136d8c"], ["9931a028d96f961f"] ] }, { "id": "bb84009f48136d8c", "type": "debug", "z": "6cad017069b129d8", "g": "97c472b7c6b71f5d", "name": "State In", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 520, "y": 300, "wires": [] }, { "id": "9931a028d96f961f", "type": "change", "z": "6cad017069b129d8", "g": "97c472b7c6b71f5d", "name": "", "rules": [{ "t": "set", "p": "payload", "pt": "msg", "to": "state", "tot": "msg" }, { "t": "delete", "p": "color", "pt": "msg" }, { "t": "delete", "p": "state", "pt": "msg" }], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 720, "y": 300, "wires": [[ "2eec194b500e86b5", "59e350de59642ac0"] ] }, { "id": "9ffb312d59fc0c97", "type": "ui_button", "z": "6cad017069b129d8", "g": "97c472b7c6b71f5d", "name": "B1", "group": "4760bf464542df14", "order": 5, "width": 2, "height": 2, "passthru": false, "label": "<i class=\"mdi mdi-power icon-3x\" style=\"fill: white\"></i>", "tooltip": "", "color": "", "bgcolor": "{{color}}", "className": "", "icon": "", "payload": "press", "payloadType": "str", "topic": "topic", "topicType": "msg", "x": 730, "y": 240, "wires": [[ "95cb52d6d488839f"] ] }, { "id": "59e350de59642ac0", "type": "debug", "z": "6cad017069b129d8", "g": "97c472b7c6b71f5d", "name": "State Out", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 900, "y": 260, "wires": [] }, { "id": "4760bf464542df14", "type": "ui_group", "name": "CH1", "tab": "a77c59bcf550b022", "order": 2, "disp": true, "width": 2, "collapse": false, "className": "" }, { "id": "a77c59bcf550b022", "type": "ui_tab", "name": "Lighting", "icon": "fa-lightbulb-o", "order": 15, "disabled": false, "hidden": false } ]`  
 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/918621c1c7b3ef9189b0f0293be8d60c2e5b4ca9.jpeg)  
 ![correct](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/d/cd64338cc1d97297cecc14c60403c277e4e3cb8f.jpeg)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 March 2022 09:43 UTC](https://discourse.nodered.org/t/material-design-icon-defaults-to-transparent-background/59425/2 "2022-03-06T09:43:28Z")

</div>

Without trying to understand what you are doing, there is 1 obvious error in your function...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5a82e79a5766a171c4df970bc480a4a92b8de607.png)  
A single bar `|` is a [bitwise OR](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR) not a logical OR (double bar `||`)

PS: I use the Monaco editor (a simple setting change in `settings.js`) and it highlights many more issues than the default ACE editor.

PS2: It is far easier to setup a class for your button and simply set the class dynamically.

---

<div class="post-metadata">

**Author:** ![pmobley](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@pmobley](https://discourse.nodered.org/u/pmobley)\
**Post date:** [7 March 2022 17:34 UTC](https://discourse.nodered.org/t/material-design-icon-defaults-to-transparent-background/59425/3 "2022-03-07T17:34:23Z")

</div>

hello thank you for your reply. Even with that fix, I am still having issues with it

---

<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:** [6 April 2022 17:34 UTC](https://discourse.nodered.org/t/material-design-icon-defaults-to-transparent-background/59425/4 "2022-04-06T17:34:24Z")

</div>

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