Change icon of a button based on another entity

Hello,

I have a switch button to open/close my garage and I would like to change the icon of it on my lovelace card, based on another sensor state which return open / close.
I’m ttying to use a type: custom:button-card and I’m trying to use template for the first time.

I created a template :

button_card_templates:
  garage:
    icon: >
      {% if states("sensor.garage_door_mqtt") == 'close' %}
       mdi:home-alert
      {%- else -%}
       mdi:home
      {%- endif %}
views: 
....

The condition has been tested into the template dev tool and it returns mdi:home or mdi:home-alert

My lovelace card is configured as below :

entity: switch.relaygaragedoor
template: garage
name: Garage
type: custom:button-card
icon: null

icon: null comes after a refresh. I guess it comes from the template.

Do you have any idea why it does not work ?
Maybe this is not the right way to do that ?
Thanks in advance for any suggestion or help

Guillaume

I’m not a YAML/Jinja expert by a long long way but surprised that works in the template editor - I’d have said it was missing a few dashes.

Try:

      {%- if states("sensor.garage_door_mqtt") == 'close' -%}
       mdi:home-alert
      {%- else -%}
       mdi:home
      {%- endif -%}

I’ve got similar templates setup for icon (and picture) changes with no issues.

Thanks for the quick reply.
I honestly don’t see any difference on what you propose except that states is bold.

That’s more my lack of familiarity with some of the markup on this forum.

In your original if/else/endif markup, it wasn’t consistently starting the marker with {%- and finishing with -%}.

Character for character there are just 3 extra - between the two. Might not make a difference (like I said, I’m not a YAML/Jinja expert) but that’s about the only difference I can see between your template and ones I have that work.

Edit: Scratch that - you may also want to use icon_template instead of icon.

I feel like the problem comes from the Jinja which is not well injected in my template.
If I put in my template :

button_card_templates:
  garage:
      show_icon: true
      icon: "mdi:home"

The icon works.

That’s the icon_template reference I mentioned - when I was trying this before, icon was expecting a straight string rather than emplate. Try:

  garage:
    icon_template: >
      {%- if states("sensor.garage_door_mqtt") == 'close' -%}
       mdi:home-alert
      {%- else -%}
       mdi:home
      {%- endif -%}

I tried this unsuccessfully

is there something specific to add into lovelace card ?

There is something using the card-mod addon you can do with this in lovelace - albeit CSS related styles rather than icon changes.

I’ve got a couple of sensors setup that show in a glance card with varying icons/colours depending on status.

The icon gets adjusted using the icon_template as I mentioned - this is a direct copy paste from something that works on my setup

icon_template: "{%- if states('sensor.md108_raid') == 'Syncing' -%}mdi:sync-circle{%- elif states('sensor.md108_raid') == 'SyncDelayed' -%}mdi:sync{%- else -%}mdi:nas{%- endif -%}"

Then with-in lovelace, the colour gets amended via cardmod:

      - entity: sensor.md108_raid
        name: MD108
        style: |
          :host {
          --paper-item-icon-color: 
           {% if states(config.entity) == "Active" %} 
             #4CAF50
           {% elif states(config.entity) == "Inactive" %}
             #FF5252
           {% else %}
             orange
           {% endif %}
           ;
           }

Thanks !

Finally I found a workaround by using another custom card to switch card based on a state :

type: custom:state-switch
entity: sensor.garage_door_mqtt
default: close
states:
  open:
    type: custom:button-card
    action: toggle
    icon: mdi:garage-open-variant
    entity: switch.relaygaragedoor
    name: Ouvert
    styles:
      card:
        - height: 60px
        - font-size: 10px
        - font-weight: bold
      icon:
        - color: Red
  close:
    type: custom:button-card
    action: toggle
    icon: mdi:garage-variant
    entity: switch.relaygaragedoor
    name: Fermé
    styles:
      card:
        - height: 60px
        - font-size: 10px
        - font-weight: bold
      icon:
        - color: Green

1 Like