Oh-button with custom icons, f7-icon with custom icons

Add-ons UIs
1

I am wondering ist would be possible to have a button with a custom icon. What I have seen the oh-button only supports f7 and material. Though I read the statement at the docu “Not applicable to openHAB icons”. The question how can I set an OH icon?

Alternatively, it would be also a solution to define a custom f7-icon. Looked through some parts of the f7 docu, seems to be possible, but not right away in OH.

I am looking for a solution for this roller shutter widget (visually still draft):

image
image768×289 27.3 KB

I have defined some custom icons. The widget is functional, the icons create commands, there is a Jython rule handling the movement, everything works as expected.

I would like to get some sort of “button feeling” when clicking, at least having a tooltip. Unfortunately, oh-icon does not support tooltips.

Any idea would be appreciated.

Once finished I will publish a tutorial with full code.

2

oh-link has a default slot, so you can use that (which has actions and a tooltip property) and just put an oh-icon in the default slot to use whatever imagery you want for that link:

    - component: oh-link
      config:
        action: url
        actionUrl: some.url
      slots:
        default:
          - component: oh-icon
            config:
              icon: custom-oh-icon
3

Thanks, works perfect

4

Thank you! I had an issue where I needed icon: property but oh-button/oh-link doesn’t support it. It supports iconF7 and iconMaterial instead. I can add slots / default for oh-button just like this and that solved my problem too!

@ysc why can’t oh-button/oh-link have icon (where you can specify the icon type with f7: / material:) just like in oh-icon ?

5

Because they’re based on resp. f7-button & f7-link and the icon property is to specify a “custom icon class” instead of behaving like you describe.