Label-card with centered icon to run a rule

[Blauaugenmaki]

Hi everybody,

I´m struggling a bit… I want to have an oh-label-card with an centered icon (material), that runs a rule, when I click on it.

In my case I want to use it for my roller-shutters.
With the following code, it´s possible to have the icon centered, but I have to click on the icon… clicking a bit left or right is not doing anything.

component: oh-label-card
config:
icon: material:keyboard_arrow_down
style:
display: flex
justify-content: center
action: rule
actionRule: xyz

Any Idea?

[JustinG]

@Blauaugenmaki

I want to have an oh-label-card

This is possible to do with a label card, but it’s much, much harder than if you just use a plain oh-card and add the icon yourself. The label card has a lot of extra internal components and styles that you are fighting against to try and get this to work. With the oh-card you move your style settings to the contentStyle property, and the icon to the content slot:

component: oh-card
config:
  action: rule
  actionRule: xyz
  contentStyle:
    display: flex
    justify-content: center
slots:
  content:
    - component: oh-icon
      config:
        icon: material:keyboard_arrow_down

[Blauaugenmaki]

Cool. Thanks alot.