How to show different icons on same card based on state

Configuration
1

For my garage door, I am building out a mobile dashboard.
I have a grid set (2 columns).
On this specific one, I am adding the garage door and then something next to it.

Is this possible…
If the garage door is shut, it will show one icon. Click the button, to open garage door, once it is open, the icon changes.

New at this, and have not figured this out.

square: true
columns: 2
type: grid
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: cover.garage_door
    icon: mdi:garage-variant
    show_state: true
    theme: Google Dark Theme

image
image1080×526 30.9 KB

2

Not with the button card as far as i know, but you can use custom:button-card, look here:

A simple config would look like this:

type: custom:button-card
entity: binary_sensor.your_garage_door_sensor
state:
  - value: 'off'
    icon: mdi:garage-lock
  - value: 'on'
    icon: mdi:garage-open
1 Like
3

How do you add this or load it up, I can’t find the instructions…sorry.

1 Like
4

You have to install the custom:button-card before you can use it. The simplest way is using HACS, here is the tutorial how to:

(Sooner or later you will need HACS so it’s a good time to begin now)
Once installed you can search in HACS for button card and install it right with a few clicks.

You can also install it manualy, here is described how to:

1 Like
5

ok got it!

Any help with the action? When I used your example, it would just show me the settings (like history).
So by looking at the other examples, I added an action, but that is doing nothing.

image
image1001×442 26.8 KB 

type: custom:button-card
entity: cover.garage_door
tap_action:
  action: cover.open_cover
state:
  - value: closed
    icon: mdi:garage-variant
  - value: open
    icon: mdi:garage-open-variant
6

Ok, fixed the action, still nothing is happening :frowning:

type: custom:button-card
entity: cover.garage_door
tap_action:
  action: call-service
  serivice: cover.open_cover
  service_data:
    entity_id: cover.garage_door
show_state: true
state:
  - value: closed
    icon: mdi:garage-variant
  - value: open
    icon: mdi:garage-open-variant
7

got it working, thank you…except for opening.
I am going to start a new thread about that soon, as it will close but not open.

8

Hi, i’m trying to do something similar with my dish washer. How did you get this working in the end?

graph: none
type: sensor
entity: sensor.dish_washer_current_consumption
state:

below: 5
icon: mdi:dishwasher-off
above: 5
icon: mdi:dishwasher-on

9

Hello, here’s another example of the state with icons and how that works for me with the state and my garage door relay, ZEN16 with tilt sensor -

type: custom:button-card
tap_action:
  action: toggle
  entity: switch.garage_door_relay_2
entity: binary_sensor.double_garage_door_sensor_window_door_is_open
show_state: true
name: Double Door
styles:
  card:
    - height: 100px
    - width: 105px
icon: mdi:garage
state:
  - value: off
    color: purple
    value: on
    color: green