Change icon in button

#1

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

#2

Does it work without the spin ?

#4

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

#5

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

#6

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

1 Like
#7

or perhaps on this example with the switch node

GIF-SWITCH

2 Likes
#8

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

1 Like