Set/change icon color by state on custom: button-card

Configuration Frontend
1

Hi!
New to HA and trying to add a card to the dashboard for a smart plug (entity: switch).
Been trying for a day but cannot seem to get the icon to change color based upon state change.
Here is the code:
I have a card with the icon centered in color black with text centered below, Water Heater (name) and test (label) on the second line.

Here is the code:

type: custom:button-card
layout: vertical
color_type: icon
entity: switch_water.heater
show_state: true
show_icon: true
show_name: true
show_label: true
icon: mdi:water-boiler
name: Water Heater
label: test
state:
  - value: "on"
    styles:
      state:
        - color: red
  - value: "off"
    styles:
      state:
        - color: green
tap_action:
  action: toggle

I checked dev tools > state and the state values for the entity: switch.water_heater is off / on.

In the end I need to ‘switch’ the display state since the plug runs a relay coil and default state of smart plug ‘off’ the relay if not ‘energized’ so the water heater state is ‘on’ and when smart plug is ‘on’ then the relay ‘energizes’ and the water heater is off. Would like to have the icon ‘green’ when the smart plug state is ‘off’ and ‘red’ when smart plug ‘on’.

Any thoughts would be greatly appreciated!

2

Hi Bob, welcome to the forum!

Try:

state:
  - value: "on"
    color: red
  - value: "off"
    color: green
3

Thanks @Nick4 for the response.

I made the suggested change, but it did not work.

Here is the ‘new’ code.

type: custom:button-card
layout: vertical
color_type: icon
entity: switch_water.heater
show_state: true
show_icon: true
show_name: true
show_label: true
icon: mdi:water-boiler
name: Water Heater
label: test
state:
  - value: "on"
    color: red
  - value: "off"
    color: green
tap_action:
  action: toggle

The ‘new’ code did not change the look of the card. The icon is the water-boiler and is color black. Below the icon is 2 rows of centered text; row1: Water Heater; row2 test. All is centered on the card.

Thanks again.

4

misspelled entity_id

5

Thank You! It works just like I wanted.

That was a rookie mistake on my part. I knew in the end it would be something simple that I did wrong. Could not see it.

Thanks again.