Change icon color without changing text color on button?

Dashboard
1

Change icon color without changing text color on button? Based on what i have seen, done, so far, it seems like you can't change the icon color separate from text color?

2

I think it is possible. I'm on phone right now so can't do much but .....
The icon in button can have many classes defined (fa fa2x ....), including custom classes. So the color in custom class may do the trick

3

So yes, it is possible. Not directly but via msg.ui_control

[{"id":"1e679465.35c78c","type":"ui_button","z":"9038de34.04db3","name":"","group":"110f893b.a0f1d7","order":0,"width":0,"height":0,"passthru":false,"label":"home button","tooltip":"","color":"","bgcolor":"","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","x":450,"y":220,"wires":[[]]},{"id":"4a88b538.b3406c","type":"inject","z":"9038de34.04db3","name":"red icon","props":[{"p":"ui_control.icon","v":"fa-home fa-2x coloredIcon red","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":260,"y":200,"wires":[["1e679465.35c78c"]]},{"id":"b0887b83.fa5e78","type":"ui_template","z":"9038de34.04db3","group":"110f893b.a0f1d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n    .coloredIcon.red{\n       color :red;\n    }\n    .coloredIcon.blue{\n       color :blue;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":440,"y":160,"wires":[[]]},{"id":"42a32029.aade","type":"inject","z":"9038de34.04db3","name":"blue icon","props":[{"p":"ui_control.icon","v":"fa-home fa-2x coloredIcon blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":260,"y":260,"wires":[["1e679465.35c78c"]]},{"id":"110f893b.a0f1d7","type":"ui_group","name":"Default","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like
4

Oh cool. Guess WHAT I AM PLAYING WITH TOMORROW!!! LOL.

5

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