Changing the colour of an icon when "on"

Configuration Frontend
1

What might be the simplest way to make the icon show in green when the garage door &/or the gate is closed (ie “off”), opposite to the red icon when it is open (ie “on”)?

TIA

square: false
type: grid
cards:
  - type: custom:mushroom-entity-card
    entity: cover.my_opengarage
    icon: mdi:garage
    icon_color: red
    fill_container: false
    name: Garage
    tap_action:
      action: toggle
    secondary_info: none
  - type: custom:mushroom-entity-card
    entity: switch.gate_button
    icon: mdi:gate
    icon_color: red
    fill_container: false
    name: Gate
    tap_action:
      action: toggle
    secondary_info: none
columns: 2
2

Use the Mushroom template card.

edit: Not near my PC at the moment but happy to post some yaml later.

edit:

something like:

  icon_color: "{{ 'red' if is_state(entity, 'on') else 'grey' }}"
3

You’ll have to use open as the state for the door and on for the switch.

square: false
type: grid
cards:
  - type: custom:mushroom-template-card
    entity: cover.my_opengarage
    icon: mdi:garage
    icon_color:  "{{ 'red' if is_state(entity, 'open') else 'green' }}"
    primary: Garage
    tap_action:
      action: toggle
  - type: custom:mushroom-template-card
    entity: switch.gate_button
    icon: mdi:gate
    icon_color:  "{{ 'red' if is_state(entity, 'on') else 'green' }}"
    primary: Gate
    tap_action:
      action: toggle
columns: 2
2 Likes
4

Many thanks both - that works perfectly :grinning:

1 Like