Change color of local svg icons

[Dirk_Albrecht]

I seem to have a simple problem around icon colors, which I can’t seem to solve
I’m using iconify icons, choosing the icon and icon-color through state-dependant choices…

value: ""
config:
  icon: ={ON:'if:mdi:lamps',OFF:'if:mdi:lamps-outline'}[@'Suite1_BedsideLamps_Switch']
  iconColor: ={ON:'gold',OFF:'#bbb'}[@'Suite1_BedsideLamps_Switch']
  color: yellow

This works well for me.

I tried to the same thing with locally stored (openhab-conf/icons/classic) icons (in svg format). while the icon choice expression works, the iconColor choice doesn’t work. The iconColor would always stay black:

value: ""
config:
  icon: ={ON:'if:mdi:lamps',OFF:'ceilinglamp'}[@'Suite1_BedsideLamps_Switch']
  iconColor: ={ON:'green',OFF:'red'}[@'Suite1_BedsideLamps_Switch']
  color: yellow

I looked into the svg file, which I downloaded from iconify and stored locally:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="currentColor" d="M8 9h3V4h2v5h3l4 8H4zm6 9a2 2 0 0 1-2 2a2 2 0 0 1-2-2z"/>
</svg>

I believe, I read somewhere that the color was set through the fill attribute set to currentColor …, which is the case.

So any hint on how I can get locally stored svg icon react to the change of the iconColor attribute?

(obviously the example given here is for illustrative purposes and doesn’t make much sense … what I’d actually like to do is to a few additional mdi-style icons for consistency, in order to extend the already very helpful mdi-iconset. And I would like the icons to react similarly as the iconify:mdi iconset stored online, without having to hardcode the iconColor in the locally stored extensions.

I have read about restrictions for openhab icons … would they apply to all “locally stored” icons … which would explain the behavior. But still that doesn’t provide a solution.

[JustinG]

@Dirk_Albrecht

would they apply to all “locally stored” icons

All the locally stored icons are served in the same way, whether they are the built-in iconset or custom made icons. There’s something about the icon servelet that doesn’t really work with the color settings and customColor. If I recall, there was some work a while back to try and get this working, but I don’t remember where that stands.

If this is in a custom widget where you have a little more control over where the icon comes from, you can try:

Custom SVG Icon Sets

The MainUI devs have done an amazing job making sure that when making your own custom widgets, you have access hundreds of possible icons, with the moderately recent addition of the iconify resource pushing that into the thousands. Even so, there are still times when only a custom icon will do. In these circumstances, OH gives you an ability to add your custom icons to the system to be called just as any of the other OH icons are. For example, my sonos speakers use a custom SVG icon that can …

Otherwise, for now your best bet would be to produce a couple of different color versions of the icons and make the icon names include the color.