# Change icon on switch

**URL:** <https://discourse.nodered.org/t/change-icon-on-switch/956>\
**Category:** Dashboard\
**Created:** [20 June 2018 14:02 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956 "2018-06-20T14:02:04Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [20 June 2018 14:02 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/1 "2018-06-20T14:02:04Z")

</div>

Good afternoon, I know how to how to show a image on a text box or there are options on a template, however on the standard switch node there is the option to change the icon

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/5d48e44e36932958acffd1350f8292175fb7903e.png)

I have tried to set this as custom and set the name of the .png image from the static folder but does not work and shows me an error as folloes:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/22065d339cf7f89d83b5b661ff95ddeaa16379a2.png)

Is that possible to be done or there is no more choice than moving to a template?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [20 June 2018 15:10 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/2 "2018-06-20T15:10:58Z")

</div>

Those "icon" text fields are not for entering urls or filenames, which is why your icon is not showing what you expect. From the `ui_switch` node's info:

> The On/Off Color and On/Off Icon are optional fields. If they are all present, the default toggle switch will be replaced with the relevant icons and their respective colors.

> The On/Off Icon field can be either [Material Design icons](https://design.google.com/icons/) (e.g. 'check', 'close') or [Font Awesome icons](https://fontawesome.com/v4.7.0/icons/) (e.g. 'fa-fire').

If you need to show some custom icon images, I think you will have to use a `ui_template` node -- but then you will have to build the interactivity (to send/recv msg data) yourself.

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [20 June 2018 21:38 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/3 "2018-06-20T21:38:51Z")

</div>

For Fa icons I already know it works, anyhow I have being able to do something similar coping the icons on the static folder and injecting each one on a text box.

Result is already amazing

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/78dd36b0f584f0a8fa416e2c53d3d4c34ab0fd7c.png)

Next target..... be able to create a template with those 3 icons on a single row and each one act as a pushbutton, lets see... does not looks easy to me.

Regards

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [20 June 2018 23:14 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/4 "2018-06-20T23:14:26Z")

</div>

Finally I have decided to leave it like this as a bit rudimentary but made to show the expected actual status of the blind depending on the latest button pushed..... so if last action (in manual or under schedule) was to raise up the blind then up is on green and down icon on yellow, if last action was to move down then down is on green and up icon on yellow, in the case the stop button was pressed then booth up & down blind icon are shown on red as the position is not determined.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d5d8aacb4ee0b44df17767cdd8822b8bc50ce401.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/4d7ded5579e9aeac782c1407d7d181382af37433.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/ada316f268e5b58a5ffb9adcaf7dde5492fc3e1f.png)

Hope you like it 🙂

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [21 June 2018 00:39 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/5 "2018-06-21T00:39:20Z")

</div>

Hi,

Your final design is great. Well done.

Just a comment about using fa icons in the switch dashboard node (original question):

It will work fine if you enter the name of the fa icon, as below:

![f-03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/bc79ca23bf45612ac99f777f6dc94072e80a8906.PNG)

You can use even the spinning icons...

![f-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/94870e3f897055e3c0717db9b6df4f99a0fe983b.PNG)

![f-02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/2e74994ce193f2c0145ac0eaaf1b47add332ecef.PNG)

Flow:

```auto
[{"id":"18597abe.938ec5","type":"ui_switch","z":"2cb1b127.fa28be","name":"","label":"UP","group":"953a8d3e.ddd6","order":0,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-refresh fa-spin","oncolor":"lime","offvalue":"false","offvalueType":"bool","officon":"fa-arrow-circle-down","offcolor":"yellow","x":351.1000061035156,"y":86.00000381469727,"wires":[[]]},{"id":"f9aeac7c.b94c1","type":"ui_switch","z":"2cb1b127.fa28be","name":"","label":"Down","group":"953a8d3e.ddd6","order":0,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-refresh fa-spin","oncolor":"lime","offvalue":"false","offvalueType":"bool","officon":"fa-arrow-circle-up","offcolor":"yellow","x":353.00000381469727,"y":153.99999904632568,"wires":[[]]},{"id":"953a8d3e.ddd6","type":"ui_group","z":"","name":"TEST","tab":"94476cd1.94e7c","disp":true,"width":"4","collapse":false},{"id":"94476cd1.94e7c","type":"ui_tab","z":"","name":"GRID","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![swisscore](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/swisscore/32/6396_2.png) [@swisscore](https://discourse.nodered.org/u/swisscore)\
**Post date:** [9 January 2019 09:57 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/6 "2019-01-09T09:57:34Z")

</div>

Hello, nice icons, what are your icons ? I didn't find these icons on fa icons

---

<div class="post-metadata">

**Author:** ![igrowing](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/igrowing/32/663_2.png) [@igrowing](https://discourse.nodered.org/u/igrowing)\
**Post date:** [27 July 2019 07:20 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/7 "2019-07-27T07:20:19Z")

</div>

Maybe off-top...  
I observe that fa-icons aren't accepted by switch. Tried 'fa-fire' as in the node help: none is showing.  
However, google material works OK if used without 'mi-'. Tried 'check' and 'close' from node help and it works.  
My NR version is:

```auto
27 Jul 10:19:27 - [info] Node-RED version: v0.18.7
27 Jul 10:19:27 - [info] Node.js version: v8.11.2
27 Jul 10:19:27 - [info] Linux 4.14.37-v7+ arm LE

```

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [27 July 2019 08:06 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/8 "2019-07-27T08:06:42Z")

</div>

> [@igrowing](#):
>
> My NR version is:

It's probably more relevant to share what version of node-red-dashboard you have as that's what you're asking about.

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [27 July 2019 10:06 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/9 "2019-07-27T10:06:16Z")

</div>

```auto
[{"id":"9697e2fb.c46fe","type":"change","z":"712ddec8.883c8","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"1","fromt":"num","to":"<i class=\"fa fa-lightbulb-o fa-2x nr-dashboard-warning\"></i>","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"0","fromt":"num","to":"<p><i class=\"fa fa-lightbulb-o fa-2x\"></i> ","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":960,"y":3240,"wires":[["f70cab64.9dd638"]]},{"id":"f70cab64.9dd638","type":"ui_text","z":"712ddec8.883c8","group":"7fccc952.17a8e8","order":1,"width":"1","height":"1","name":"icon status entrada","label":"","format":"{{msg.payload}}","layout":"row-center","x":1150,"y":3240,"wires":[]},{"id":"7fccc952.17a8e8","type":"ui_group","z":"","name":"luces","tab":"7b345faa.30565","order":2,"disp":true,"width":"7","collapse":true},{"id":"7b345faa.30565","type":"ui_tab","z":"","name":"SALON","icon":"fa-television","order":2}]

```

---

<div class="post-metadata">

**Author:** ![igrowing](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/igrowing/32/663_2.png) [@igrowing](https://discourse.nodered.org/u/igrowing)\
**Post date:** [27 July 2019 14:49 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/10 "2019-07-27T14:49:35Z")

</div>

> [@knolleary](#):
>
> It's probably more relevant to share what version of node-red-dashboard you have as that's what you're asking about.

NR dashboard version 2.15.5

And node:

```auto
[
    {
        "id": "c58ee072.8a123",
        "type": "ui_switch",
        "z": "f1073339.c03c3",
        "name": "",
        "label": "Valve",
        "tooltip": "Think twice before click",
        "group": "93bf6bca.bc3238",
        "order": 7,
        "width": "2",
        "height": "2",
        "passthru": false,
        "decouple": "true",
        "topic": "homie/shiber-01/shiber/valve/set",
        "style": "",
        "onvalue": "true",
        "onvalueType": "bool",
        "onicon": "fa-tint",
        "oncolor": "cyan",
        "offvalue": "false",
        "offvalueType": "bool",
        "officon": "fa-fire",
        "offcolor": "red",
        "x": 610,
        "y": 1740,
        "wires": [
            [
                "210cb9a6.c15896",
                "2ae91a5f.34bfb6"
            ]
        ]
    },
    {
        "id": "93bf6bca.bc3238",
        "type": "ui_group",
        "z": "",
        "name": "She-bear: status",
        "tab": "fd92601d.1a632",
        "order": 7,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "fd92601d.1a632",
        "type": "ui_tab",
        "z": "",
        "name": "Garden",
        "icon": "local_florist",
        "order": 2
    }
]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [27 July 2019 19:31 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/11 "2019-07-27T19:31:30Z")

</div>

fa-icons work fine for me using dashboard v 2.15.5  
 ![24%20PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/554c3da4d23eb5420ee09690e27ed921e81ff071.png)  
 ![04%20PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b6c8236febb9efec03c29a6de640048612f1c7ae.png)  
However I am running NR 0.20.5 and I see you are on NR v0.18.7.....

And your example shows the icon fine in my dashboard....

---

<div class="post-metadata">

**Author:** ![pietrofduarte](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pietrofduarte/32/29882_2.png) [@pietrofduarte](https://discourse.nodered.org/u/pietrofduarte)\
**Post date:** [8 October 2020 17:37 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/12 "2020-10-08T17:37:19Z")

</div>

Hi @davidcgu great controls. I am looking for some like this to adapt to set up my air conditioner. Could you share this code with me?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9e23d640917b3aa1e8ea69b6ab83a2d0bb895a79.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [8 October 2020 17:53 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/13 "2020-10-08T17:53:54Z")

</div>

@pietrofduarte  
A - this thread is over a year old  
B - did you try the flow he posted?

---

<div class="post-metadata">

**Author:** ![pietrofduarte](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pietrofduarte/32/29882_2.png) [@pietrofduarte](https://discourse.nodered.org/u/pietrofduarte)\
**Post date:** [8 October 2020 18:33 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/14 "2020-10-08T18:33:42Z")

</div>

@Andrei nice job. Could you tel me how you could be the right alignment?  
I copy and import you code but when I try do myself the I failed.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a98e86baea89be2b928a7f736f58953fae837a34.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [8 October 2020 18:55 UTC](https://discourse.nodered.org/t/change-icon-on-switch/956/15 "2020-10-08T18:55:46Z")

</div>

How large did you define the group?  
 ![Screen Shot 2020-10-08 at 2.54.56 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/a/baf51a619bd5236648edc05cf9a0d80097d982d7.png)

 ![Screen Shot 2020-10-08 at 2.55.09 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/9/d94969306f15d892a99fde8dda98e95c46a00ab8.png)