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

Configuration Frontend
1

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!

2

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

1 Like
3

Is the raspi_temp example just for changing the color of the icon? I am looking for a way to change the entire icon, and it looks like the original post here also wants the whole icon to change. Unless he’s adding another icon on top of the original?

4

his code posted above does this.

5

I actually did not notice the icon state change there, sorry about that. I will test and see how it works.

I am using Paper-button row for a lot of other things and there it’s very simple, no scripts, but I cannot get the paper-buttons to look like what I want for some reason, so wanted to test with customer-button-card.

Thanks.