How to correctly set an icon_template on a button

Configuration
1

Hi there,
I’m running a Home Assistant Docker installation on which I would like to have a button which has an icon depending on a different entity’s state.
Let’s say I have a button “Garage” which triggers a script that triggers a Shelly.
Now, I have a second entity which is a window/door contact from HMIP giving me the current state of the garage door (binary_sensor.hmip_ap_shutter_contact).

When I want to set the Garage button icon depending on this binary sensor, nothing happens:

type: button
name: Garage
tap_action:
  action: call-service
  service: script.garagentor
  service_data: {}
  target: {}
entity: switch.shelly_garagentor
icon_template: >-
  {% if is_state("binary_sensor.hmip_ap_shutter_contact", "on") %}
  mdi:garage-open-variant {% else %} mdi:garage-variant {% endif %}

When using the developer tools to figure out the right template parameters, everything works out fine, however setting the icon depending on the state won’t work.

What am I doing wrong, am I missing something?

Thanks in advance.

2

Hello,
Button card does not support icon_template : Button Card - Home Assistant

3

Hi @SNoof85,
oh I see, thanks for the hint. However, is there another way to change my button icon using a different entity’s state? Do I have to create a custom component for that and if so, how can I achieve that?

Thanks in advance.

4

You can use card-mod to achieve this : GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

type: button
name: Garage
tap_action:
  action: call-service
  service: script.garagentor
  service_data: {}
  target: {}
entity: switch.shelly_garagentor
card_mod:
  style: |
    :host {
      {% if is_state('binary_sensor.hmip_ap_shutter_contact', 'on') %}
      --card-mod-icon: mdi:garage-open-variant;
      {% else %}
      --card-mod-icon: mdi:garage-variant;
      {% endif %}
    }
1 Like
5

Thanks so much @SNoof85, it worked and that solves plenty of UI problems for me! :slight_smile:

1 Like