# Dashboard-2 dynamically set icon and icon color of ui-switch

**URL:** <https://discourse.nodered.org/t/dashboard-2-dynamically-set-icon-and-icon-color-of-ui-switch/88130>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [20 May 2024 20:57 UTC](https://discourse.nodered.org/t/dashboard-2-dynamically-set-icon-and-icon-color-of-ui-switch/88130 "2024-05-20T20:57:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [20 May 2024 20:57 UTC](https://discourse.nodered.org/t/dashboard-2-dynamically-set-icon-and-icon-color-of-ui-switch/88130/1 "2024-05-20T20:57:49Z")

</div>

how can i set icon and icon color of ui-switch with css in dashboard 2?

another question: when i inject the following class with msg.class, it does not change until i refresh the page ?

```auto
.my_switch_class .nrdb-switch {
    background-color: black !important;
    color: white !important;
}

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [21 May 2024 08:02 UTC](https://discourse.nodered.org/t/dashboard-2-dynamically-set-icon-and-icon-color-of-ui-switch/88130/2 "2024-05-21T08:02:05Z")

</div>

> [@RedTom](#):
>
> another question: when i inject the following class with msg.class, it does not change until i refresh the page ?

This _shouldn't_ be the case - do you have a flow you can share please?

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [21 May 2024 10:12 UTC](https://discourse.nodered.org/t/dashboard-2-dynamically-set-icon-and-icon-color-of-ui-switch/88130/3 "2024-05-21T10:12:17Z")

</div>

here is the flow

```auto
[
    {
        "id": "981ba4b0ce8bdc17",
        "type": "ui-switch",
        "z": "147a00e24481a9dc",
        "name": "",
        "label": "switch",
        "group": "d6059922833afe8d",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": false,
        "topic": "topic",
        "topicType": "msg",
        "style": "",
        "className": "",
        "onvalue": "true",
        "onvalueType": "bool",
        "onicon": "",
        "oncolor": "",
        "offvalue": "false",
        "offvalueType": "bool",
        "officon": "",
        "offcolor": "",
        "x": 710,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "ef954a4c4ccecd40",
        "type": "ui-template",
        "z": "147a00e24481a9dc",
        "group": "",
        "page": "",
        "ui": "f807a6e2b6ed1656",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".my_switch_class .nrdb-switch {\n background-color: black !important;\n color: white !important;\n}\n\n.my_switch_class2 .nrdb-switch {\n background-color: gray !important;\n color: white !important;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 880,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "d18a02fd5416f3db",
        "type": "function",
        "z": "147a00e24481a9dc",
        "name": "function 2",
        "func": "msg.class =\"my_switch_class\"\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 540,
        "y": 200,
        "wires": [
            [
                "981ba4b0ce8bdc17"
            ]
        ]
    },
    {
        "id": "f0cb787618c828ff",
        "type": "inject",
        "z": "147a00e24481a9dc",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 380,
        "y": 200,
        "wires": [
            [
                "d18a02fd5416f3db"
            ]
        ]
    },
    {
        "id": "8c1bfc507d7fc969",
        "type": "function",
        "z": "147a00e24481a9dc",
        "name": "function 3",
        "func": "msg.class =\"my_switch_class2\"\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 540,
        "y": 280,
        "wires": [
            [
                "981ba4b0ce8bdc17"
            ]
        ]
    },
    {
        "id": "eb96258994e120c7",
        "type": "inject",
        "z": "147a00e24481a9dc",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 380,
        "y": 280,
        "wires": [
            [
                "8c1bfc507d7fc969"
            ]
        ]
    },
    {
        "id": "d6059922833afe8d",
        "type": "ui-group",
        "name": "My Group",
        "page": "adfdb0073bd846f6",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f807a6e2b6ed1656",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "adfdb0073bd846f6",
        "type": "ui-page",
        "name": "Page 2",
        "ui": "f807a6e2b6ed1656",
        "path": "/page2",
        "icon": "home",
        "layout": "grid",
        "theme": "5075a7d8e4947586",
        "order": 2,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "5075a7d8e4947586",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<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:** [21 May 2024 10:32 UTC](https://discourse.nodered.org/t/dashboard-2-dynamically-set-icon-and-icon-color-of-ui-switch/88130/4 "2024-05-21T10:32:48Z")

</div>

@joepavitt I have confirmed this issue locally.

@RedTom

Can you please [raise an issue](https://github.com/FlowFuse/node-red-dashboard/issues/new/choose)? Also, are you seeing this on other nodes or just the switch node?

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [21 May 2024 11:10 UTC](https://discourse.nodered.org/t/dashboard-2-dynamically-set-icon-and-icon-color-of-ui-switch/88130/5 "2024-05-21T11:10:13Z")

</div>

ok,  
i raised an issue, hope i get it right,

i have only seen this with the ui-switch,  
but i did not work much with htlm and css because of the lack of Experience.  
beside the refresh problems with Android and the ui-templates (there are already issues open),  
i just wanted to tweak the standard widgets a little bit.

can someone help me with my first question ?  
icon and icon color ?

---

<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:** [20 June 2024 11:10 UTC](https://discourse.nodered.org/t/dashboard-2-dynamically-set-icon-and-icon-color-of-ui-switch/88130/6 "2024-06-20T11:10:48Z")

</div>

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