Change icon and colors based on state

Configuration Frontend
1

Hi all,

I have a picture elements card configured to show a 3D floorplan of my house. I have lights configured like this for example:

  - entity: light.livingroom
    hold_action: none
    icon: 'mdi:lightbulb-on-outline'
    style:
      left: 50%
      top: 10%
      transform: 'scale(2, 2)'
    tap_action:
      action: toggle
    type: state-icon

Right now, if I click on the mdi:lightbulb-on-outline icon it changes from white (when the light is off) to yellow (when the light is on)

I am trying to make the icon switch based on entity-state. This is what I want to accomplish:

  • when the light is off the icon should be mdi:lightbulb-outline, color: white
  • when the light is on the icon should change to mdi:lightbulb-on-outline, color: yellow

I am trying to make it work using state-icon like so:

  - entity: light.livingroom
    hold_action: none
    state_icon:
      'off': 'mdi:lightbulb-outline'
      'on': 'mdi:lightbulb-on-outline'
    style:
      left: 50%
      top: 10%
      transform: 'scale(2, 2)'
    tap_action:
      action: toggle
    type: state-icon

The problem is that if I do it like this I get the mdi:lightbulb-outline changing color from white (off) to yellow (on) but the icon remain the same (it doesn’t switch to mdi:lightbulb-on-outline when the light is on).

Any suggestion on how to accomplish this?

Many thanks

2

Anyone that can help on this?