Action on oh-icon not working

Add-ons UIs
1

When I want a button to open another window or do something else, I always use oh-button, but this element doesn’t support Iconify (yet). that’s why I was looking at oh-icon, but I don’t get my actions to work, actually, nothing happens at all. I’m runnning OH 3.3

Working action with oh-button:

- component: oh-button
            config:
              iconF7: gear_alt_fill
              color: gray
              iconSize: 18
              action: popup
              actionModal: widget:onkyo
              actionModalConfig:
                itemPrefix: Onkyo

Not working with oh-icon:

- component: oh-icon
            config:
              icon: iconify:mdi:television-ambient-light
              width: 20px
              color: gray
              action: popup
              actionModal: widget:onkyo
              actionModalConfig:
                itemPrefix: Onkyo
2

Did you solve this.
I have the same problem.

3

I use a “workaround” for oh-chart component (see Include graphic in custom echarts gauge widget - #2 by crnjan), cannot try it out if below works too since I’m not at home, but maybe something like:

- component: f7-block
  config:
    class:
      - no-margin
  slots:
    default:
      - component: oh-link
        config:
          style:
            position: absolute
            width: 100%
            height: 100%
          actionModal: widget:onkyo
          actionModalConfig:
            itemPrefix: Onkyo
      - component: oh-icon
        config:
               ...
4

I can confirm the following works

Screenshot 2023-05-09 at 13.30.36
Screenshot 2023-05-09 at 13.30.361948×1454 309 KB

tapping on icon will display

Screenshot 2023-05-09 at 13.32.13
Screenshot 2023-05-09 at 13.32.132402×1108 138 KB

5

My problem is that i have three different icons with different actions on the card.

6

Actions on an oh-icon work if the icon has been defined with one of the oh specific icons. F7 and iconify icons at present do not register actions. I don’t know if this is a technical limitation, or an oversight. If you wish to see it addressed you can post an issue on the web repo.

In the meantime, the solution is the oh-link. Anywhere you have an oh-icon you should be able to substitute an oh-link with the action configurations and then add the oh-icon in the link’s default slot.

- component: oh-link
  config:
    action: ...
  slots:
    default:
      - component: oh-icon
        config:
          icon: iconify:...
1 Like
7

Perfect.