HABPanel - Custom Icon - Colorize

Apps & Services HABPanel
1

Hello @ysc !

First of all, thanks you for added Custom Icon option in HABPanel, In this way I don’t have to manually add custom icon set in your code each time I want to upgrade, this is great !

But, when I pickup an icon from the built-in list, the icon herit the colorize tag (class=“icon-tile ng-scope colorize”), but when I use a Custom Icon, the icon appear black (it dont have colorize tag (class=“icon-tile ng-scope”))…

Do you think you can add a tick box when you select custom icon to add or not the colorize option ??? Or maybe I missed something ??

Thanks you in advance,

Best regards,

Mac_Fly

1 Like
2

Hi @MacFly - Fair enough, even though only makes sense for certain types of icons (those which are not already colorized).

It isn’t so simple since this would involve adding a new option everywhere where icons are supported (there are only 2 atm, one for the iconset and one for the icon). I’ll think about it.

Cheers

1 Like
3

Ok I understand, thanks you to get this in consideration !

When I edit your code to add a Icon set, the colorize function works when needed.

I will see if I can set a color inside the svg in the mean time.

4

You can override some CSS rules to colorize all icons if this makes sense - the standard icons will be colorized as well.

widget-icon img {
  filter: var(--icon-color-filter);
}
widget-icon img.off {
  filter: var(--icon-color-off-filter);
}

Put the above in a file in conf/html and reference it as an additional stylesheet in the settings (/static/file.css).

2 Likes
5

Dear Yannick,

I use some Eclipse Smarthome Classic icons, they have colors, and they will not be colorized by Habpanel, but when I use some icons from builtin icons set, they will be colorized by Habpanel. Is it maybe possible to apply same setting as Builtin Iconset when you use “Custom Icon” option ?

Anyway thanks for the hint, I will test !

6

Can someone explain how can I replace an iconset in Habpanel? I found the jar (org.openhab.ui.habpanel-2.4.0.jar), emptied the existing iconset folder and fill it with new icons. After restarting openhab it still sees the old ones?! How?!

7

hi,
I am very new and less experiece with css etc - can someone explain me how to do this… like a tutorial? :wink:

this is my custom code and i would like to give the svg icon another color. i dont get it to work… :frowning:


would really appreciate some help here… :wink: