Icon change based on state

Configuration Frontend
1

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
tap_action:
  action: navigation
  navigation_path: null
custom_fields:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: toggle
          icon: mdi:lamp
          entity: light.0x00178801044b2aaa
          card_mod:
            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;
              }
2

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

3

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

4

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