Button-card Icon Not Updating Based on Binary Sensor State (Template Sensor)

Configuration Frontend
1

Hi everyone,

I’m hoping someone can help me figure out why the icon on my button-card isn’t changing based on the state of a related binary_sensor. I’ve been trying to get the icon for my garage door button to switch between mdi:garage-variant (closed) and mdi:garage-open-variant depending on the state of binary_sensor.garage_door_opening.

I looked at a similar request on the forum here: [Change Button icon based on binary sensor state](https://community.home-assistant.io/t/change-button-icon-based-on-binary-sensor-state/417692), but it seems the syntax used there is for an older version of Home Assistant and resulted in several errors for me.
My approach has been to set up a template sensor in my configuration.yaml file. Here’s the YAML for my template sensor:

template:
  - sensor:
      - name: "Garage Door Icon"
        unique_id: garage_door_icon_sensor_id
        state: >
          {% if is_state('binary_sensor.garage_door_opening', 'off') %}
            closed
          {% else %}
            open
          {% endif %}
        icon: >
          {% if is_state('binary_sensor.garage_door_opening', 'off') %}mdi:garage-variant
          {% else %}mdi:garage-open-variant
          {% endif %}

---- cut ---- cut ---- cut ----
And here’s my Test Dashboard entry:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        entity: sensor.garage_door_icon
        type: button
      - name: Garage 1
        entity: switch.garage_door_button
        type: custom:button-card
        tap_action:
          action: toggle
        show_name: true
        show_icon: true
        icon: "{{ state_attr('sensor.garage_door_icon', 'icon') }}"
      - name: Garage 2
        entity: switch.garage_door_button
        type: custom:button-card
        tap_action:
          action: toggle
        show_name: true
        show_icon: true
        icon: |
          {% if states('binary_sensor.garage_door_opening').state == 'off' %}
            sensor.garage_door_icon
          {% else %}
            sensor.garage_door_icon
          {% endif %}
      - name: Garage 3
        entity: switch.garage_door_button
        type: custom:button-card
        tap_action:
          action: toggle
        show_name: true
        show_icon: true
        icon: "{{ states('sensor.garage_door_icon').attributes.icon }}"

---- cut ---- cut ---- cut ----

The dashboard card looks like this:

deleteme
deleteme752×159 2.64 KB

Using the sensor.garage_door_icon directly shows that I have set the icon. However, when I try to copy this to the garage_door_button button-card the icon does not appear. (As you can see I’ve tried a few variations to no avail).

The state of the sensor.garage_door_icon entity in Developer Tools → States changes correctly (between “closed” and “open”), and the icon attribute also updates to the correct mdi: icon. However, the icon on the button card itself remains blank.

I’ve also tried directly templating the icon in the button-card like this:

icon: >
    {% if is_state('binary_sensor.garage_door_opening', 'off') %}
      mdi:garage-variant
    {% else %}
      mdi:garage-open-variant
    {% endif %}`

But that didn’t work either (the button just shows no icon).

I’d be grateful for any thoughts you have on addressing this.

Thanks in advance!

2

As this is within custom button, for sure you must use javascript syntax, like

icon: |
  [[[
    return states['binary_sensor.garage_door_opening'] === 'off'
      ? 'mdi:garage-variant' : 'mdi:garage-open-variant';
  ]]]

And also for custom button “Garage 1”:

icon: "[[[ return states['sensor.garage_door_icon'].attributes.icon; ]]]"

As for the first button (not custom), I honestly don’t know what’s the expected behaviour, i.e. if it should change the icon when its entity’s icon changes.

3

Hi slimak,

I appreciate your attention to this.

The first button was just me proving to myelf that the template sensor icon was doing anything at all.

I’ve revised my dashboard card to this single button:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - name: Garage Door
        entity: switch.garage_door_button
        type: custom:button-card
        tap_action:
          action: toggle
        show_name: true
        show_icon: true
        icon: |
          [[[
            return states['binary_sensor.garage_door_opening'].state === 'off'
              ? 'mdi:garage-variant' : 'mdi:garage-open-variant';
          ]]]

Which is what you’ve provided plus a little pokeing around of my own (the .state and the lower case ‘off’). It’s working great now! I couldn’t have done it without you - I had no idea this JS syntax was an option.

Thanks !