Change icon in button

[bandito1gan]

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"

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}]

[dceejay]

Does it work without the spin ?

[bandito1gan]

@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) =/

[Leroxy]

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 (e.g. 'check', 'close') or a Font Awesome icon (e.g. 'fa-fire') , or a Weather icon.

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

[Andrei]

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

Examples of Colour change button and switch

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…

[Andrei]

or perhaps on this example with the switch node

[bandito1gan]

Thank you for reply. Yes it good example and it worked!
I found it recently.
thank you for the examples Andrei dceejay

[KeverJeroen]

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:

 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:

{{msg.icon}}

Thanks

[markost]

Look here Button icon via msg

[hotNipi]

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 ) 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)

[KeverJeroen]

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:

This is the export:

[{"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:

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

The output of de debug is:

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

And the dashboard shows:

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.

[nickmcgill]

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

HTH

[nickmcgill]

The code I put in the function is
var image;

image = "wi-wu-chancesnow"
msg.ui_control={};
msg.ui_control.icon = image;
return msg;