You’re trying to display an image inside the oh-button component I suppose. oh-button (and the f7-component it’s based on) doesn’t support slots - so this will not work.
Generally the oh-button component only supports icons from the f7- and the material-iconset, which I attached an example below.
For explanation to the oh-image component you’re trying to use - the ‘/static/’ path corresponds with the ‘/etc/openhab/html/’ folder of your installation. And you don’t need the equal sign in that case, because you’re not accessing a prop, item or variable. So this would work, if you place an image in the above mentioned path:
- component: oh-image
config:
url: "/static/a1.png"
To reach your initial goal, you have to use a small workaround. (see the third button example in the code below) Be aware that there is a slight distinction with this workaround in the ‘hover’ and ‘pressed’-state of the button.
You also can leave your icon inside the ‘/etc/openhab/icons/classic/’ folder then, as ‘oh-icon’ is looking for icons there and in the integrated OH-iconset.
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
class:
- margin-right
text: F7-icon
icon-f7: plus_circle
iconSize: 25
iconColor: white
raised: true
large: true
fill: true
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
class:
- margin-right
text: Material-icon
icon-material: add_circle
iconSize: 25
iconColor: white
raised: true
large: true
fill: true
- component: f7-row
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: a1
style:
height: 25px
- component: Label
config:
text: OH-icon
Hope it helps!
