# Change icon in button

**URL:** <https://discourse.nodered.org/t/change-icon-in-button/6177>\
**Category:** Dashboard\
**Created:** [27 December 2018 18:50 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177 "2018-12-27T18:50:12Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![bandito1gan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bandito1gan/32/4745_2.png) [@bandito1gan](https://discourse.nodered.org/u/bandito1gan)\
**Post date:** [27 December 2018 18:50 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/1 "2018-12-27T18:50:12Z")

</div>

Hello and Merry Christmas!  
I have a question,can i change icon in button in this way?  
if i put icon code in button it is work good, but my Christmas dream is change icon in action 🙂  
Task: combine 2 blue buttons in 1  
1 step: button without click = text "refresh" + icon "refresh"  
2 step: click on button = text "refreshing" + icon "fa-circle-o-notch fa-spin"  
after 2 sec. (i do it in trigger)  
3 step: button without click = text "refresh" + icon "refresh"

 ![Untitled](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4190789b7a5d39d2181553ec5b9689a795088daf.png)  
in my code i have "error" icon,It's possible? Maybe in ui template? Anybody know?

`[{"id":"3eec07a5.7e927","type":"inject","z":"617b000e.08f458","name":"","topic":"","payload":"{\"t\":\"white\",\"b\":\"green\",\"l\":\"refresh\",\"h\":\"fa-circle-o-notch fa-spin\"}","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":"","x":701.3333129882812,"y":95.33333587646484,"wires":[["f9691353.683e1","b6fc8b4.00e7078"]]},{"id":"f9691353.683e1","type":"ui_button","z":"617b000e.08f458","name":"","group":"b30f6923.247d88","order":5,"width":"4","height":"2","passthru":false,"label":"{{payload.l}} ","color":"{{payload.t}} ","bgcolor":"{{payload.b}} ","icon":"{{payload.h}} ","payload":"","payloadType":"str","topic":"","x":907.3333129882812,"y":99.33333587646484,"wires":[["dbd7ece2.bdabe8"]]},{"id":"dbd7ece2.bdabe8","type":"trigger","z":"617b000e.08f458","op1":"{\"t\":\"white\",\"b\":\"green\",\"l\":\"refreshing\",\"icon\":\"fa-refresh fa-spin\"}","op2":"{\"t\":\"white\",\"b\":\"green\",\"l\":\"refresh\",\"icon\":\"refresh\"}","op1type":"json","op2type":"json","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":908.3333129882812,"y":177.33333587646484,"wires":[["f9691353.683e1"]]},{"id":"b6fc8b4.00e7078","type":"debug","z":"617b000e.08f458","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":993.4999389648438,"y":45.666656494140625,"wires":[]},{"id":"b00a94d1.2c2318","type":"ui_button","z":"617b000e.08f458","name":"refresh","group":"b30f6923.247d88","order":0,"width":0,"height":0,"passthru":false,"label":"refresh","color":"","bgcolor":"","icon":"refresh","payload":"","payloadType":"str","topic":"","x":662.3333129882812,"y":28.333335876464844,"wires":[[]]},{"id":"96cbc551.117b2","type":"ui_button","z":"617b000e.08f458","name":"circle","group":"b30f6923.247d88","order":0,"width":0,"height":0,"passthru":false,"label":"refreshing","color":"","bgcolor":"","icon":"fa-circle-o-notch fa-spin","payload":"","payloadType":"str","topic":"","x":794.3333129882812,"y":24.333335876464844,"wires":[[]]},{"id":"d1131c0d.381fb8","type":"ui_template","z":"617b000e.08f458","name":"","order":0,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":683.5000152587891,"y":161.3333282470703,"wires":[[]]},{"id":"b30f6923.247d88","type":"ui_group","z":"","name":"Plot 1","tab":"9ff88ff2.97d78","order":1,"disp":true,"width":"6","collapse":false},{"id":"9ff88ff2.97d78","type":"ui_tab","z":"","name":"Plots","icon":"dashboard","order":3}]`

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [27 December 2018 19:42 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/2 "2018-12-27T19:42:39Z")

</div>

Does it work without the spin ?

---

<div class="post-metadata">

**Author:** ![bandito1gan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bandito1gan/32/4745_2.png) [@bandito1gan](https://discourse.nodered.org/u/bandito1gan)\
**Post date:** [29 December 2018 10:00 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/4 "2018-12-29T10:00:13Z")

</div>

> [@dceejay](#):
>
> Does it work without the spin ?

not work through inject payload,only if i insert icon code in icon area in button(2 blue buttons) =/

---

<div class="post-metadata">

**Author:** ![Leroxy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leroxy/32/4806_2.png) [@Leroxy](https://discourse.nodered.org/u/Leroxy)\
**Post date:** [19 January 2019 00:14 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/5 "2019-01-19T00:14:36Z")

</div>

I am stuck on the same as far as I can tell it goes like this;

Icon cannot be set by a message property by setting the field to the name of the property, for example  
{{msg.icon}}...

only as;

The **Icon** can be defined, as either a [Material Design icon](https://design.google.com/icons/)_(e.g. 'check', 'close')_ or a [Font Awesome icon](https://fontawesome.com/v4.7.0/icons/)_(e.g. 'fa-fire')_ , or a [Weather icon](https://github.com/Paul-Reed/weather-icons-lite/blob/master/css/weather-icons-lite.css).

maybe put it up as a feature request.

I have a smart wall plug.  
I want a power icon red=on white=off  
but when its disconnected it should be a wifi icon in black

---

<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:** [19 January 2019 01:22 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/6 "2019-01-19T01:22:03Z")

</div>

I would suggest having a look on this example from the FAQs:

> [@Examples of Colour change button and switch](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650):
>
> A simple example of a button that has two states and changes colour/text and icon based on those two states [{"id":"b9a70965.13e138","type":"ui\_button","z":"d511095d.512808","name":"","group":"c070ecdb.6d5ce","order":0,"width":"0","height":"0","passthru":false,"label":"{{payload}}","color":"","bgcolor":"{{colour}}","icon":"","payload":"press","payloadType":"str","topic":"","x":590,"y":615,"wires":[["48aaee20.8d9e1"]]},{"id":"5cc84101.ac6d9","type":"change","z":"d511095d.512808","name":"","rules…

---

<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:** [19 January 2019 01:31 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/7 "2019-01-19T01:31:29Z")

</div>

[or perhaps on this example with the switch node](https://discourse.nodered.org/t/change-icon-on-switch/956/5)

![GIF-SWITCH](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/5f20bd7197120d11bc969438b06ce29acd2ebbc0.gif)

---

<div class="post-metadata">

**Author:** ![bandito1gan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bandito1gan/32/4745_2.png) [@bandito1gan](https://discourse.nodered.org/u/bandito1gan)\
**Post date:** [19 January 2019 13:01 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/8 "2019-01-19T13:01:59Z")

</div>

Thank you for reply. Yes it good example and it worked!😀  
I found it recently.  
thank you for the examples [Andrei](https://discourse.nodered.org/u/Andrei) [dceejay](https://discourse.nodered.org/u/dceejay)🙂

---

<div class="post-metadata">

**Author:** ![KeverJeroen](https://avatars.discourse-cdn.com/v4/letter/k/5f8ce5/32.png) [@KeverJeroen](https://discourse.nodered.org/u/KeverJeroen)\
**Post date:** [24 January 2020 20:25 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/9 "2020-01-24T20:25:24Z")

</div>

Hi I've found this topic because I ave the same problem as the topic starter. Is there a reason why it's nog possible to use a variable to change the icon of a button? All other fields of a button can be filled with a variable with no problem (like the label, tooltip, colour and background), but only the icon field doesn't work..

I just want a simple function to change the Icon. Something like this:

```auto
 var image;
if(msg.payload <= "2"){
 image = "wi-wu-chancesnow";
}
else{
 image = "wi-wu-mostlysunny";
}
msg.icon = image;
return msg

```

And in the icon field of the button I have:

```auto
{{msg.icon}}

```

Thanks

---

<div class="post-metadata">

**Author:** ![markost](https://avatars.discourse-cdn.com/v4/letter/m/3d9bf3/32.png) [@markost](https://discourse.nodered.org/u/markost)\
**Post date:** [24 January 2020 20:32 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/10 "2020-01-24T20:32:16Z")

</div>

Look here [Button icon via msg](https://discourse.nodered.org/t/change-icon-in-ui-button-via-message/20396/3)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 January 2020 21:08 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/11 "2020-01-24T21:08:14Z")

</div>

`msg.payload <= "2"`  
Things are going wrong here even we don't know about what is in `msg.payload`.  
JavaScript (with all its weirdness's [https://github.com/denysdovhan/wtfjs](https://github.com/denysdovhan/wtfjs) ) behaves differently with numbers and strings.  
So make sure the type of data and then compare number with number. (or if you really must compare string with number, be prepared to do it in the right way)

---

<div class="post-metadata">

**Author:** ![KeverJeroen](https://avatars.discourse-cdn.com/v4/letter/k/5f8ce5/32.png) [@KeverJeroen](https://discourse.nodered.org/u/KeverJeroen)\
**Post date:** [25 January 2020 15:58 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/12 "2020-01-25T15:58:24Z")

</div>

You're right, this is not how it should work, but it works. The debug shows that it works. But ok, just to make it more simple, I've did it like this:

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

This is the export:

```auto
[{"id":"ba9a6f86.97999","type":"debug","z":"7b4023c5.1e24fc","name":"Debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":490,"y":920,"wires":[]},{"id":"d42d344f.8e9828","type":"inject","z":"7b4023c5.1e24fc","name":"Just a trigger","topic":"homie/homey-topic/at-temp-and-hum/measure-temperature","payload":"25","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":170,"y":980,"wires":[["c57e75e0.298818"]]},{"id":"c57e75e0.298818","type":"function","z":"7b4023c5.1e24fc","name":"set var","func":"var image;\n\nimage = \"wi-wu-chancesnow\"\n\nmsg.icon = image;\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":980,"wires":[["b912131.25c67f","ba9a6f86.97999"]]},{"id":"b912131.25c67f","type":"ui_button","z":"7b4023c5.1e24fc","name":"test button","group":"b7e44d48.b227d","order":7,"width":0,"height":0,"passthru":false,"label":"{{msg.icon}}","tooltip":"{{msg.icon}}","color":"","bgcolor":"","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","x":510,"y":980,"wires":[[]]},{"id":"b7e44d48.b227d","type":"ui_group","z":"","name":"Group 6","tab":"bf9cdcc.4e7c92","order":6,"disp":false,"width":"4","collapse":false},{"id":"bf9cdcc.4e7c92","type":"ui_tab","z":"","name":"Startscherm","icon":"home","order":1,"disabled":false,"hidden":false}]

```

The code in de Function is now really simple:

```auto
var image;
image = "wi-wu-chancesnow"
msg.icon = image;
return msg;

```

The output of de debug is:

```auto
payload: 25
icon: "wi-wu-chancesnow"

```

And the dashboard shows:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/8/4888bc45e407072a70edace138ce9c14583d7d40.png)

So i'm sure the variable is set by the function and I'm sure the button understands the variable in all fields (tooltip and label), but the icon-field..

I know there are other ways to set the icon, but I just don't understand why this doesn't work.

---

<div class="post-metadata">

**Author:** ![nickmcgill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nickmcgill/32/17179_2.png) [@nickmcgill](https://discourse.nodered.org/u/nickmcgill)\
**Post date:** [16 February 2020 18:21 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/13 "2020-02-16T18:21:05Z")

</div>

Try msg.ui\_control.icon="wi-wu-chancesnow"

The changes you can make to ui items are listed here [https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)

HTH

---

<div class="post-metadata">

**Author:** ![nickmcgill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nickmcgill/32/17179_2.png) [@nickmcgill](https://discourse.nodered.org/u/nickmcgill)\
**Post date:** [16 February 2020 18:26 UTC](https://discourse.nodered.org/t/change-icon-in-button/6177/14 "2020-02-16T18:26:23Z")

</div>

The code I put in the function is  
var image;

image = "wi-wu-chancesnow"  
msg.ui\_control={};  
msg.ui\_control.icon = image;  
return msg;