Button Card - Not changing colour

Configuration Frontend
1

Hi Team

I have a button card that i am trying to have the icon and the icon colour change depending if it is on or off.

The icon is changing correctly but the colour stays green when i want it to be red when its on.

Any suggestions?

type: custom:button-card
entity: climate.all_heating
icon: mdi:radiator
show_icon: true
show_name: false
size: 50px
tap_action:
  action: navigate
  navigation_path: /dashboard-ios/heating
styles:
  card:
    - padding: 1px
  icon:
    - color: |
        [[[ return entity.state === 'on' ? 'red' : 'green'; ]]]
    - width: 50px
    - height: 50px
state:
  - value: "on"
    icon: mdi:radiator
    styles:
      icon:
        - color: red
  - value: "off"
    icon: mdi:radiator-off
    styles:
      icon:
        - color: green
2

Changed it. This now works using the below.

type: custom:button-card
entity: climate.all_heating
name: All Thermostat
show_state: false
show_name: false
icon: mdi:radiator
styles:
  card:
    - width: 75px
    - height: 50px
    - font-size: 18px
    - text-align: center
  name:
    - font-weight: bold
state:
  - value: heat
    color: red
    icon: mdi:radiator
  - value: cool
    color: blue
    icon: mdi:snowflake
  - value: "off"
    color: green
    icon: mdi:radiator-off