State Icon - change icon and color on status

Configuration Frontend
1

Hello everyone,

I am building a floor plan dashboard with a picture element card. Now I’m trying to integrate buttons to control lights, covers etc that should show the state of the corresponding entity. By default it looks fine for my lights (gray icon for off state and yellow icon for on state), but I’m not so happy with the covers. They are gray when they are closed and purple when they are open. So I’ve been trying to customize the behavior. I would like to specify an icon and color for the open state and another icon and color for the closed state.

Unfortunately, I couldn’t figure out how to do that. This is the code of my test dashboard:

views:
  - title: Test
    path: test
    cards:
      - type: picture-elements
        elements:
          - type: state-icon
            entity: cover.kueche_rollo
            style:
              left: 15%
              top: 15%
              border-radius: 50%
              text-align: center
              background-color: rgba(255, 255, 255, 0.3)
            state:
              - value: 'closed'
                icon: mdi:lightbulb-on
              - value: 'open'
                icon: mdi:door-closed
            tap_action:
              action: toggle
          - type: state-icon
            entity: light.wc_licht
            style:
              left: 10%
              top: 10%
              border-radius: 50%
              text-align: center
              background-color: rgba(255, 255, 255, 0.3)
            tap_action:
              action: toggle
            state:
              - value: 'off'
                icon: mdi:table-chair
              - value: 'on'
                icon: mdi:door-closed
        image: https://demo.home-assistant.io/stub_config/floorplan.png
    type: panel

The behavior is still on default. What am I doing wrong with the state part? How can I set the icon color?
Thanks for your help in advance!

2

You’ll need to use card mod to achieve this.

image

type: picture-elements
elements:
  - type: state-icon
    entity: cover.bed_curtains
    style:
      left: 15%
      top: 15%
      border-radius: 50%
      text-align: center
    card_mod:
      style: |
        :host{
           --state-cover-open-color: red !important;
           --state-cover-closed-color: grey !important;
           --mdc-icon-size: 30px;
            background: none !important;
                  }
1 Like