Custom icons in custom widgets

Setup, Configuration and Use Items & Sitemaps
1

F7 icon set are great but is almost useless for home automation.
How I can use custom icons in widgets?

This code displays nice big bulb:

 - component: oh-icon
   config:
       color: '=((items[props.switchItem].state == "ON") || (items[props.switchItem].state > 0) || (items[props.dimmerItem].state > 0)) ? props.micaColor : "gray"'
       icon: '=props.mainIcon ? props.mainIcon : "f7:lightbulb"'
       width: 10vw

But if I change icon to “oh:bulb” icon becomes very small.
Icon used is bulb.svg file downloaded from HABPanel. I also tried with other .png icons, same effect.
What am I doing wrong?

Maybe someone knows some icon sets that can be used in widgets and pages?
Maybe somehow icons from HABPanel can be used?

2
3

Could you elaborate?
Material icons same problem as F7 .
Iconify are online, isn’t? Inline, but how to use this in props?
What about icon size? Why custom icon ignores width parameter?

4

Not 100% sure what you are after, just wanted to share what you can use as a source. A good start might also be this article New feature in Main UI: Iconify support for icons.

5

I am trying to switch from HABPanel to Pages. I have made some custom widgets which has taken me way too long. And now it turns out that I can’t set different icons in Pages depending on the device.
I can use my own icons, but they don’t display like the others.

6

In the case of an oh-icon component, the size is only given in px and can also be omitted

width: 50

should do it

7

Thanks.
It works that way.

Why OH icons can’t change color? Is there any workaround?

8

But there is a downside, the icon is large on a small screen and relatively small on a large screen

9

Simulated color change with “filter”.

- component: oh-icon
  config:
  color: '=((items[props.switchItem].state == "ON") || (items[props.switchItem].state > 0) || (items[props.dimmerItem].state > 0)) ? props.micaColor : "gray"'
  icon: '=props.mainIcon ? props.mainIcon : "f7:lightbulb"'
  width: 96               
  style:
     filter: '=props.mainIcon.split(":")[0] == "oh" ? ((items[props.switchItem].state == "ON") || (items[props.switchItem].state > 0) || (items[props.dimmerItem].state > 0)) ? "invert(95%) sepia(90%) hue-rotate(0deg) opacity(90%)" : "invert(50%) sepia(10%) hue-rotate(90deg) opacity(90%)" : ""'

Nothing from here seems to work.