Custom:button-card - change icon on state change

Configuration Frontend
1

Can someone help me out with this code please?

I wan’t to change the valve icon depending on the item state.
The if works for the other icon called heater but it does not work when I try to change the icon of the valve.

it looks like this:
image
and
image
but the question mark should be replaced by the valve icons.

type: custom:button-card
entity: switch.ak_ventil_fb
icon: mdi:hanger
aspect_ratio: 1/1
name: Ankleide
state:
  - value: off
    color: var(--paper-item-icon-color)
  - value: on
    color: var(--primary-color)
styles:
  name:
    - padding-bottom: 18px
  card:
    - background-color: /*#002000*/
  grid:
    - position: relative
  custom_fields:
    heater:
      - color: |
          [[[
            if (states['switch.ak_ventil_fb'].state == 'on')
              return "red";
            return "grey";
          ]]]      
      - position: absolute
      - left: 60%
      - top: 10%
      - height: 40px
      - width: 40px
    valve:
      - color: grey     
      - position: absolute
      - left: 64%
      - top: 45%
      - height: 30px
      - width: 30px
      - icon: |
          [[[
            if (states['switch.ak_ventil_fb'].state == 'on')
              return "mdi:valve-open";
            return "mdi:valve-closed";
          ]]]
      - color: |
          [[[
            if (states['switch.ak_ventil_fb'].state == 'on')
              return "red";
            return "grey";
          ]]]      
custom_fields:
  heater: |
    [[[
      return `<ha-icon
        icon="mdi:heating-coil"
        style="width: 40px; height: 40px; /*color: grey;*/">
        </ha-icon>`
    ]]]
  valve: |
    [[[
      return `<ha-icon
        icon="mdi:help"
        </ha-icon>`
    ]]]

Thanks!

2

I’ve not used the card before, but tinkering with it, it looks like whatever is defined in the custom field overrides the style. For example if you un-comment out setting the color to grey in your code, then the style does not override it.

So my first thought was to omit the icon definition and allow the style to set it. However this results in no icon. Instead you can put the code into the custom field instead of a style:

  valve: |
    [[[
      const icon = states['switch.ak_ventil_fb'].state == 'on'
              ? "mdi:valve-open" : "mdi:valve-closed"
      return `<ha-icon
        icon="${icon}"
        </ha-icon>`
    ]]]