Icon change based on state

Hi all,

I’m having trouble getting my icons to change based on their state.

Below, you’ll find the configuration of the card I’m using, created by following step-by-step instructions from a YouTube video.

My goal is to make the icons within the card change based on their current state.

For example:

If the living room light is on, then the icon changes from mdi:lamp to mdi:lamp-outline.

I’ve done some research and tried different methods based on advice from other threads, but I’m still a beginner when it comes to YAML.

Any help would be greatly appreciated.

type: custom:button-card
name: Living Room
icon: mdi:sofa
entity: sensor.living_room_temp_humid_temperature
  action: navigation
  navigation_path: null
      type: custom:mushroom-chips-card
        - type: template
            action: toggle
          icon: mdi:lamp
          entity: light.0x00178801044b2aaa
            style: |
              ha-card {
                --chip-background: {{ 'rgba(138, 205, 215, 1)' if is_state('light.0x00178801044b2aaa', 'on') else 'rgba(138, 205, 215, 0.3)' }};
                padding: 5px!important;
                border-radius: 100px!important;

please post you minimal config and format it using the </> button in the toolbar…

Thanks for that, I don’t post too often :+1:

Since this is a light, then the template can also be changed from sensor to light.