Add an icon based on state in a custom-button card

Gents,

i am currently trying to put together a card for my garage door

I want to show 3 States

  • When my garage door is closed and locked (using my door sensor and a sensor I added on the lock)
  • When my garage door is closed and unlocked
  • When my garage door is open

I created the custom button card as follows

entity: binary_sensor.door_window_sensor_158d0001de8a5c
type: custom:button-card
tap_action: more-info
name: garage
icon: kuf:fts_garage
show_state: false
show_name: false
styles:
  custom_fields:
    notification:
      - position: absolute
      - left: 70%
      - top: 10%
      - height: 20px
      - width: 20px
      - font-size: 12px
      - line-height: 20px
      - color: |
          [[[
            if (states['binary_sensor.verrousoussol'].state == 'on')
              return "red";
            return "white";
          ]]]
      - icon: |
          [[[
            if (states['binary_sensor.verrousoussol'].state == 'on')
              return 'mdi:lock-open-alert-outline';
            return 'mdi:lock-check-outline';
          ]]]
  card:
    - width: 100px
    - height: 100px
    - background-color: transparent
    - box-shadow: none
  icon:
    - width: 100%
    - justify-self: center
  grid:
    - padding-bottom: 0px
  name:
    - position: relative
    - bottom: 1em
state:
  - value: 'off'
    icon: kuf:fts_garage_door_100
    styles:
      card:
        - filter: opacity(100%)
      icon:
        - filter: grayscale(100%)
custom_fields:
  notification: |
    [[[
      return `${states['binary_sensor.verrousoussol'].state}`
    ]]]

And I am getting this which is pretty close to what I want:

image
The garage door is closed and locked

image
The garage door is closed and unlock

image
The garage door is open (and therefore unlocked)

I would like to replace those ON and OFF notifications by some Locks icons (as you can guess from my YAML)

What I am doing wrong here?

Thanks!

There is a similar example in the button-card documentation (the “sensor.raspi_temp” one).