Widget Icon Colors

Tags: #<Tag:0x00007efed1914bb0> #<Tag:0x00007efed1914ae8> #<Tag:0x00007efed1914570>

I’m working on a custom control using the Template Widget. In this, I’d like to be able to change the color of icons and the text shown. I haven’t found a way to change the color of the icons. For many items, especially the ones that I’m using the “switch” template, etc. for I want to keep the default color behavior of off / blue. As a result, I really have two needs:

  1. Be able to force it to one state or the other (off / blue) using ng-if, etc.
  2. Be able to set custom colors - let’s say I want one green/red for important state items.

I’m assuming that the color is being driven by some global state settings that drives the off/blue states, but I’m not sure where, or how to override it. I’ve searched, but haven’t found much on custom colors, and haven’t really seen any examples where people have done it.

If it requires custom icons like is used for the weather states, etc. I can do that, but I was hoping there was a way to color the existing icon packages on the fly. If not, I understand and I’ll start making icons…



I’ve made a little progress and answered question #1. By calling the image directly, it allows the “colorization” to be set. Here’s the on and off states:

<img class="icon-tile ng-scope colorize colorize" src="assets/icons/freepik-household/light-bulb.svg" />

<img class="icon-tile ng-scope colorize off" src="assets/icons/freepik-household/light-bulb.svg" />

Now to figure out the paths for the other icon sets…

As for question #2, I’m still stumped…



I have looked for these myself. If you look at the “local code” for predefined switches/widgets using other icon sets you can actually extract whats needed for your code.

“freepik-household” should then be replaced with the wanted set (I’m not at home at the moment)
“light-bulb.svg” could for example then be replaced with e.g. “temperature.svg”

Hope it helps.

I did exactly what you suggested and have found everything except for the Eclipse Smarthome Classic set. Using the “eclipse-smarthome-classic” like is in the local code doesn’t work…

If anyone knows where this one is specifically, I haven’t found it yet.




Did you find the answer ?

On my side I try to change the icon color according to value of an item.
0 for green, 1 for Yellow , etc…

Need some help


No, I just resorted to creating my own colored icons and calling the appropriate one using ng-if statements…