# Change Icon on a button according to its input message

**URL:** <https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906>\
**Category:** Dashboard\
**Created:** [23 August 2020 14:53 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906 "2020-08-23T14:53:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicedevil](https://avatars.discourse-cdn.com/v4/letter/n/858c86/32.png) [@nicedevil](https://discourse.nodered.org/u/nicedevil)\
**Post date:** [23 August 2020 14:53 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/1 "2020-08-23T14:53:42Z")

</div>

Is there a possible solution to change a buttons icon by it's input message?

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

We are able to change the color, the background and the label. But I was not able to change the icon ☹

Am I doing something wrong?

---

<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:** [23 August 2020 17:32 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/2 "2020-08-23T17:32:44Z")

</div>

this is the best resource for what you can change for the node-red-dashboard widgets: [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)

---

<div class="post-metadata">

**Author:** ![nicedevil](https://avatars.discourse-cdn.com/v4/letter/n/858c86/32.png) [@nicedevil](https://discourse.nodered.org/u/nicedevil)\
**Post date:** [24 August 2020 20:47 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/3 "2020-08-24T20:47:59Z")

</div>

@zenofmud  
First, thank you for that link. Played with it a bit, but I can't get this done on my 4th button ☹

```auto
e=true;
c='#ffb86c';
l='Preheat';
return {topic: l, ui_control: {icon: "fa-fire fa-2x"}, background: c, enabled: e};

```

And the icon settings looks like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/3/13e864d4acdb8648657fa6db4f6f7f17d2296334.png)

Did I miss something?  
It is only changing the Icon and not the background and the label ☹  
also tryed it with bgcolor as object of ui\_control.  
On other icons it is working like charm.  
I guess there is a limit?

---

<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:** [24 August 2020 20:50 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/4 "2020-08-24T20:50:42Z")

</div>

can you provide your flow?

---

<div class="post-metadata">

**Author:** ![nicedevil](https://avatars.discourse-cdn.com/v4/letter/n/858c86/32.png) [@nicedevil](https://discourse.nodered.org/u/nicedevil)\
**Post date:** [24 August 2020 20:57 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/6 "2020-08-24T20:57:58Z")

</div>

```auto
[{"id":"695794c6.b6771c","type":"ui_button","z":"3fd8d84d.77ffe8","name":"Preheat/Cooldown","group":"a300f3bb.336ce","order":7,"width":2,"height":1,"passthru":false,"label":"{{msg.label}}","tooltip":"","color":"#6272a4","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"","x":2210,"y":1360,"wires":[["685a81a0.0fd06"]]},{"id":"87bd2866.fc9c98","type":"function","z":"3fd8d84d.77ffe8","name":"Change Button","func":"var p=flow.get('state'),\n bed_a=flow.get('bed_a'),\n bed_t=flow.get('bed_t'),\n hotend_a=flow.get('hotend_a'),\n hotend_t=flow.get('hotend_t');\n \nif (p!='Operational') {\n e=false;\n c='#ffb86c';\n l='Preheat';\n return {label: t, ui_control: {icon: \"fa-fire fa-2x\", bgcolor: c}, enabled: e};\n} else {\n e=true;\n if (bed_t === 0 || hotend_t === 0) {\n c='#ffb86c';\n l='Preheat';\n flow.set('heating', true);\n return {topic: l, ui_control: {icon: \"fa-fire fa-2x\", bgcolor: c}, enabled: e};\n } else {\n c='#8be9fd';\n l='Cooldown';\n flow.set('heating', false);\n return {topic: l, ui_control: {icon: \"fa-snowflake-o fa-2x\", bgcolor: c}, enabled: e};\n }\n \n}","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1860,"y":1360,"wires":[["695794c6.b6771c"]]},{"id":"b08c57ed.fc989","type":"link in","z":"3fd8d84d.77ffe8","name":"Octoprint: State IN","links":["e7896c82.32e53"],"x":1695,"y":1360,"wires":[["1027c39a.bcf394","ad6adf5f.d0c59","87bd2866.fc9c98","9d16962d.dfc208"]]},{"id":"54895b01.fd5834","type":"link in","z":"3fd8d84d.77ffe8","name":"Octoprint: Temp IN","links":["82d3b365.e0faa"],"x":1695,"y":1400,"wires":[["87bd2866.fc9c98"]]},{"id":"685a81a0.0fd06","type":"trigger","z":"3fd8d84d.77ffe8","name":"250ms","op1":"true","op2":"false","op1type":"bool","op2type":"bool","duration":"1","extend":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":2390,"y":1360,"wires":[["994e26f4.ba9ff8"]]},{"id":"994e26f4.ba9ff8","type":"function","z":"3fd8d84d.77ffe8","name":"","func":"var p=msg.payload,\n h=flow.get('hotend')||200,\n b=flow.get('bed')||60,\n ht=flow.get('heating');\n\nif (!ht) {h=0;b=0;}\n\nif (p) {\n msg.topic=\"printer/bed\";\n msg.payload={\"temp\":b};\n} else {\n msg.topic=\"printer/nozzle\";\n msg.payload={\"temp\":h};\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":2540,"y":1360,"wires":[["541effed.b9153"]]},{"id":"541effed.b9153","type":"mqtt out","z":"3fd8d84d.77ffe8","name":"","topic":"","qos":"","retain":"","broker":"d84648ac.612fb8","x":2730,"y":1240,"wires":[]},{"id":"82d3b365.e0faa","type":"link out","z":"3fd8d84d.77ffe8","name":"Octoprint: Temp OUT","links":["54895b01.fd5834"],"x":555,"y":260,"wires":[]},{"id":"e7896c82.32e53","type":"link out","z":"3fd8d84d.77ffe8","name":"Octoprint: State OUT","links":["b08c57ed.fc989"],"x":695,"y":360,"wires":[]},{"id":"d443353b.61c368","type":"change","z":"3fd8d84d.77ffe8","name":"State","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.state_string","tot":"msg"},{"t":"set","p":"state","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":360,"wires":[["353fc9c8.4cb386","e7896c82.32e53"]]},{"id":"9558d90e.4107c8","type":"json","z":"3fd8d84d.77ffe8","name":"","property":"payload","action":"","pretty":false,"x":430,"y":360,"wires":[["d443353b.61c368"]]},{"id":"6b76afdf.8a4d3","type":"json","z":"3fd8d84d.77ffe8","name":"","property":"payload","action":"","pretty":false,"x":430,"y":280,"wires":[["1364f18e.756bfe","82d3b365.e0faa","bafc5ba9.af1da8"]]},{"id":"b8dd0f15.61ea","type":"switch","z":"3fd8d84d.77ffe8","name":"","property":"topic","propertyType":"msg","rules":[{"t":"cont","v":"temperature","vt":"str"},{"t":"cont","v":"progress/","vt":"str"},{"t":"cont","v":"PrinterStateChanged","vt":"str"},{"t":"else"}],"checkall":"false","repair":false,"outputs":4,"x":290,"y":340,"wires":[["6b76afdf.8a4d3"],["c87bfcf2.6008e"],["9558d90e.4107c8"],[]]},{"id":"a889ffd5.e6226","type":"mqtt in","z":"3fd8d84d.77ffe8","name":"","topic":"octoPrint/#","qos":"2","datatype":"auto","broker":"d84648ac.612fb8","x":150,"y":340,"wires":[["b8dd0f15.61ea"]]},{"id":"a300f3bb.336ce","type":"ui_group","z":"","name":"Artillery Sidewinder X1","tab":"84a6d123.14c8","order":1,"disp":true,"width":"10","collapse":false},{"id":"d84648ac.612fb8","type":"mqtt-broker","z":"","name":"","broker":"X.X.X.X","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"84a6d123.14c8","type":"ui_tab","z":"","name":"Octoprint","icon":"print","disabled":false,"hidden":false}]

```

---

<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:** [24 August 2020 21:00 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/7 "2020-08-24T21:00:13Z")

</div>

Your flow doesn't show any buttons

---

<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:** [24 August 2020 21:08 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/8 "2020-08-24T21:08:10Z")

</div>

You don't have to use the icon field to set the icon... you can just use the label field eg  
`<i class="fa fa-random"></i> Hello`  
so you could send that in as {{msg.label}} or whatever...

---

<div class="post-metadata">

**Author:** ![nicedevil](https://avatars.discourse-cdn.com/v4/letter/n/858c86/32.png) [@nicedevil](https://discourse.nodered.org/u/nicedevil)\
**Post date:** [27 August 2020 19:57 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/9 "2020-08-27T19:57:01Z")

</div>

heya, just got time to test a bit around.

I changed my node to this:

```auto
if (p!='Operational') {
    e=false;
    c='#ffb86c';
    l='<i class="fa-fire fa-2x"></i>Preheat';
    return {label: l, bgcolor: c, enabled: e};
} else {
    e=true;
    if (bed_t === 0 || hotend_t === 0) {
        c='#ffb86c';
        l='<i class="fa-fire fa-2x"></i>Preheat';
        flow.set('heating', true);
        return {label: l, bgcolor: c, enabled: e};
    } else {
        c='#8be9fd';
        l='<i class="fa-snowflake-o fa-2x"></i>Cooldown';
        flow.set('heating', false);
        return {label: l, bgcolor: c, enabled: e};
    }
}

```

The result is this... so icon not working, and fa-fire will work if I write it inside the icon field directly. But I need this dynamical.

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

---

<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 August 2020 20:02 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/10 "2020-08-27T20:02:18Z")

</div>

The class needs to be “fa fa-whatever...”  
You are missing an fa

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [27 August 2020 20:27 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/11 "2020-08-27T20:27:35Z")

</div>

**try this simple flow with Switch ui:**  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfbd7fa498f7ac6f1a8cb30bf074467f689323ea.png)

```auto
[{"id":"e8637b76.811498","type":"inject","z":"fe2c7bc6.bd49c8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":1260,"y":3230,"wires":[["e306a256.35a33"]]},{"id":"7bb925de.65e23c","type":"inject","z":"fe2c7bc6.bd49c8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":1130,"y":3250,"wires":[["e306a256.35a33"]]},{"id":"e306a256.35a33","type":"ui_switch","z":"fe2c7bc6.bd49c8","name":"","label":"<font color=steelblue>FlowLu</font>","tooltip":"","group":"d25d612.50442a","order":3,"width":2,"height":1,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"play_arrow","oncolor":"cyan","offvalue":"false","offvalueType":"bool","officon":"face","offcolor":"red","x":1360,"y":3300,"wires":[[]]},{"id":"d25d612.50442a","type":"ui_group","z":"","name":"forrage","tab":"8402418e.d5d13","order":3,"disp":true,"width":"10","collapse":true},{"id":"8402418e.d5d13","type":"ui_tab","z":"","name":"ESP12","icon":"home","order":11,"disabled":false,"hidden":false}]

```

send True : ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/7/771d037ce2a9018998d653dbb91fd23c49475941.png)  
send False : ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a0f3ce707881308289d0388bf741bd00a08b96cd.png)

**if you want for Button ui :**  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2de344ab2467ffad627b14e81a9e4a5d9dd38b0f.png)

```auto
[{"id":"c852c504.7342c8","type":"function","z":"a8b1b208.7036f","name":"Gate","func":"if (msg.payload === false)node.send({ui_control:{\"icon\":\"volume_off\"}});\nif (msg.payload === true)node.send({ui_control:{\"icon\":\"volume_up\"}});\nif (msg.payload === \"fireOn\")node.send({ui_control:{\"icon\":\"fa-fire\",\"color\":\"blue\"}});\nif (msg.payload === \"fireOff\")node.send({ui_control:{\"icon\":\"fa-fire\",\"color\":\"red\"}});","outputs":1,"noerr":0,"initialize":"","finalize":"","x":490,"y":1780,"wires":[["c1aeff38.602c9"]]},{"id":"c1aeff38.602c9","type":"ui_button","z":"a8b1b208.7036f","name":"icon","group":"d25d612.50442a","order":2,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"volume_up","payload":"","payloadType":"str","topic":"","x":650,"y":1780,"wires":[[]]},{"id":"c8685cac.f4e21","type":"inject","z":"a8b1b208.7036f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":340,"y":1730,"wires":[["c852c504.7342c8"]]},{"id":"bd6a2ac4.89fbd8","type":"inject","z":"a8b1b208.7036f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":340,"y":1780,"wires":[["c852c504.7342c8"]]},{"id":"b08311c9.ee011","type":"inject","z":"a8b1b208.7036f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fireOn","payloadType":"str","x":330,"y":1820,"wires":[["c852c504.7342c8"]]},{"id":"a718bee1.b0d6c","type":"inject","z":"a8b1b208.7036f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fireOff","payloadType":"str","x":330,"y":1860,"wires":[["c852c504.7342c8"]]},{"id":"d25d612.50442a","type":"ui_group","z":"","name":"forrage","tab":"8402418e.d5d13","order":3,"disp":true,"width":"10","collapse":true},{"id":"8402418e.d5d13","type":"ui_tab","z":"","name":"ESP12","icon":"home","order":11,"disabled":false,"hidden":false}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e502740526356b219656380ee66c08ddb4810924.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/5/a5cdf403fa27c8c3a0e258f0f695bcb4e906a14d.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/29cd968307226570744df526d50cab4f8f340592.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/29cd968307226570744df526d50cab4f8f340592.png)

- [Angular materials icon](https://klarsys.github.io/angular-material-icons/) are animated
- [Font awsome icon](https://fontawesome.com/v4.7.0/icons/) nop

**However, I can't change the color of the Button icon :**  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd2474fe897961775d95e4975ea874da62feba17.png)  
@dceejay "not needed" **mean:**"cannot be applied" ? 🤔

---

<div class="post-metadata">

**Author:** ![nicedevil](https://avatars.discourse-cdn.com/v4/letter/n/858c86/32.png) [@nicedevil](https://discourse.nodered.org/u/nicedevil)\
**Post date:** [28 August 2020 04:20 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/12 "2020-08-28T04:20:45Z")

</div>

works now  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/978123af11d0f2cef2637b0031d9dc6ec677ba55.png)

@SuperNinja that was a problem I had as well. So I decided to do it with msg.bgcolor and write in the line of the color: {{msg.bgcolor}} f.e.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [28 August 2020 05:12 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/13 "2020-08-28T05:12:14Z")

</div>

What solution did you find?  
Remember to check the "Solution" box in the post that helped you this will help the next one who comes across this post.

---

<div class="post-metadata">

**Author:** ![nicedevil](https://avatars.discourse-cdn.com/v4/letter/n/858c86/32.png) [@nicedevil](https://discourse.nodered.org/u/nicedevil)\
**Post date:** [28 August 2020 14:03 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/14 "2020-08-28T14:03:26Z")

</div>

@SuperNinja I did 🙂

@dceejay is it possible to make anything with all properties with this _thing?  
Like color/backgroundcolor and so on?_

---

<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:** [28 August 2020 14:22 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/15 "2020-08-28T14:22:37Z")

</div>

not needed means you can already set it using the {{msg.mycolorproperty}} type syntax

---

<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:** [28 August 2020 14:24 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/16 "2020-08-28T14:24:26Z")

</div>

no - you can set some via the form properties and some via ui\_control

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [28 August 2020 14:39 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/17 "2020-08-28T14:39:19Z")

</div>

Thanks for your answer Dave,

When I send this

```auto
node.send({ui_control:{"icon":"fa-fire","color":"red","bgcolor":"white"}});

```

to the Button ui node (in my example above): neither the color of the icon, nor the color of the background change.

Am I doing something wrong?

---

<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:** [28 August 2020 14:50 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/18 "2020-08-28T14:50:20Z")

</div>

maybe like this

```auto
[{"id":"8dec10b2.32f8d","type":"ui_button","z":"846d7832.3348c8","name":"","group":"13b35473.20565c","order":7,"width":0,"height":0,"passthru":false,"label":"{{msg.words}}","tooltip":"","color":"","bgcolor":"{{msg.bgcolor}}","icon":"","payload":"","payloadType":"str","topic":"","x":360,"y":1500,"wires":[[]]},{"id":"c9e00538.34c4d8","type":"inject","z":"846d7832.3348c8","name":"","props":[{"p":"bgcolor","v":"red","vt":"str"},{"p":"words","v":"<i class=\"fa fa-fire\"></i> Fire","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":160,"y":1500,"wires":[["8dec10b2.32f8d"]]},{"id":"42253daf.6100a4","type":"inject","z":"846d7832.3348c8","name":"","props":[{"p":"bgcolor","v":"blue","vt":"str"},{"p":"words","v":"<i class=\"fa fa-random\"></i> Random","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":170,"y":1540,"wires":[["8dec10b2.32f8d"]]},{"id":"13b35473.20565c","type":"ui_group","z":"","name":"Default","tab":"de4df751.046f08","order":3,"disp":false,"width":"6","collapse":false},{"id":"de4df751.046f08","type":"ui_tab","z":"","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [28 August 2020 19:07 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/19 "2020-08-28T19:07:12Z")

</div>

excellent, thanks again Dave !

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [28 August 2020 20:40 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/20 "2020-08-28T20:40:57Z")

</div>

Last precision Dave @dceejay ,  
**Here you incorporate the icon in the "Label" of the button with a "class" and it works well.**![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/3/d3d37bec5e704d1e133fd71c801d3bc335ff7fe9.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20a7f98fd997498ed8541ac34ebe7986686245ab.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfb71cca11ec60b842057917ff90b0576772eff3.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/9/d919c4c8a93233c9e9f70d02d0dcb083fb9cc4db.png)  
_Inject node_ -\> _Button node_

**Now I want to separate the icon and the Label in my message:**  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/53237a3d60e517e063e4a9e306a5bd80fe79568b.png)

**if i send from a Function node:**

```auto
node.send({ui_control:{"words":"hot","icon":"fa-fire","color":"orange","bgcolor":"red"}});

```

```auto
[{"id":"9f840f92.fe1e","type":"function","z":"79bfee6e.39e9e","name":"Gate","func":"if (msg.payload === \"fireOn\")node.send({ui_control:{\"words\":\"hot\",\"icon\":\"fa-fire\",\"color\":\"orange\",\"bgcolor\":\"red\"}});\nif (msg.payload === \"fireOff\")node.send({ui_control:{\"words\":\"cold\",\"icon\":\"fa-snowflake-o\",\"color\":\"yellow\",\"bgcolor\":\"blue\"}});\n\n\n\n\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":270,"y":280,"wires":[["a35fe451.36a988","77f5a499.7a488c"]]},{"id":"98d3423d.1cbbe","type":"inject","z":"79bfee6e.39e9e","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fireOff","payloadType":"str","x":100,"y":290,"wires":[["9f840f92.fe1e"]]},{"id":"77f5a499.7a488c","type":"ui_button","z":"79bfee6e.39e9e","name":"","group":"d25d612.50442a","order":7,"width":"2","height":"1","passthru":false,"label":"{{msg.words}}","tooltip":"","color":"{{msg.color}}","bgcolor":"{{msg.bgcolor}}","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","x":420,"y":280,"wires":[[]]},{"id":"14602582.7fbdda","type":"inject","z":"79bfee6e.39e9e","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fireOn","payloadType":"str","x":100,"y":260,"wires":[["9f840f92.fe1e"]]},{"id":"d25d612.50442a","type":"ui_group","z":"","name":"forrage","tab":"8402418e.d5d13","order":3,"disp":true,"width":"10","collapse":true},{"id":"8402418e.d5d13","type":"ui_tab","z":"","name":"ESP12","icon":"home","order":11,"disabled":false,"hidden":false}]

```

only icon change, not colors and no Label ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e08cca75e4dcfac8838d5e6db32ea9f988742fb2.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/3504f905bd222d9278cac605f447fadd13d1ab63.png)

**And if i send:**

```auto
node.send({"words":"hot","icon":"fa fa-fire","color":"orange","bgcolor":"red"});

```

```auto
[{"id":"aa59863f.63af08","type":"function","z":"79bfee6e.39e9e","name":"Gate","func":"if (msg.payload === \"fireOn\")node.send({\"words\":\"hot\",\"icon\":\"fa-fire\",\"color\":\"orange\",\"bgcolor\":\"red\"});\nif (msg.payload === \"fireOff\")node.send({\"words\":\"cold\",\"icon\":\"fa-snowflake-o\",\"color\":\"yellow\",\"bgcolor\":\"blue\"});\n\n\n/*\nif(msg.payload === \"test\")node.send({\"words\" :'<i class=\"fa fa-bath\"></i>Cool',\n \"icon\":\"fa-random\",\n \"color\" : \"black\",\n \"bgcolor\" : \"cyan\"});\n*/\n\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":270,"y":210,"wires":[["1a9490c1.30ad4f","4007a8fa.18acc8"]]},{"id":"484fd514.e9bd8c","type":"inject","z":"79bfee6e.39e9e","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fireOff","payloadType":"str","x":110,"y":210,"wires":[["aa59863f.63af08"]]},{"id":"4007a8fa.18acc8","type":"ui_button","z":"79bfee6e.39e9e","name":"","group":"d25d612.50442a","order":7,"width":"2","height":"1","passthru":false,"label":"{{msg.words}}","tooltip":"","color":"{{msg.color}}","bgcolor":"{{msg.bgcolor}}","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","x":420,"y":210,"wires":[[]]},{"id":"523aac56.8956a4","type":"inject","z":"79bfee6e.39e9e","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fireOn","payloadType":"str","x":110,"y":180,"wires":[["aa59863f.63af08"]]},{"id":"d25d612.50442a","type":"ui_group","z":"","name":"forrage","tab":"8402418e.d5d13","order":3,"disp":true,"width":"10","collapse":true},{"id":"8402418e.d5d13","type":"ui_tab","z":"","name":"ESP12","icon":"home","order":11,"disabled":false,"hidden":false}]

```

only bgcolor and Label change , not icon and not color ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/f/df74b82781dd726af7664d74aed07f7a4e9fbc6c.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6ea97b06b2e20b910455ce87fd4bc5ebb20ebcd3.png)

**PS :**"fa fa-fire" or "fa-fire" do the same thing

---

<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:** [11 September 2020 20:41 UTC](https://discourse.nodered.org/t/change-icon-on-a-button-according-to-its-input-message/31906/21 "2020-09-11T20:41:01Z")

</div>

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