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
(why no) custom icons in system widgets?
#3

Thanks, works perfect