Changing icons for custom_fields based on condition

[Goeste]

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser

Describe the bug
Icons for custom_fields based on condition are not showing. instead [object Object] or [nothing] shows up.

Version of the card
Version: 3.4.2

To Reproduce
This is the configuration I used:

entity: binary_sensor.emma_tur_iaszone_2
name: Balkontür Emma
tap_action:
  action: none
aspect_ratio: 1/1
show_label: true
custom_fields:
  battery:
    icon: |-
      [[[ if (states['sensor.emma_tur_battery_2'].state <= 20)
          return 'mdi:battery-low'; return 'mdi:battery-high' ]]]
label: |-
  [[[ if (states['binary_sensor.emma_tur_iaszone_2'].state == "off")
      return 'geschlossen - BAT@' + states['sensor.emma_tur_battery_2'].state + '%' ; else return 'offen' + states['sensor.emma_tur_battery_2'].state + '%' ]]] 
icon: |-
  [[[ if (states['binary_sensor.emma_tur_iaszone_2'].state == "off")
      return 'mdi:balcony'; return 'mdi:balcony' ]]]
styles:
  icon:
    - color: |-
        [[[ if (states['binary_sensor.emma_tur_iaszone_2'].state == "off")
            return 'white'; return '#fdd835' ]]]
  label:
    - font-size: 12px
  custom_fields:
    battery:
      - position: absolute
      - right: 10px
      - top: 10px
      - color: >-
          [[[ if (states["sensor.emma_tur_battery_2"].state <= 20) return "red";
          else return "green"]]]

Screenshots

Expected behavior
I expect the icon to change based on the battery level of the sensor in the yaml

Additional context
If 'icon' is not a class of custom_fields, how can I change the icon based on the battery level with the code from the documentation:

      [[[
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 12px; height: 12px; color: yellow;">
          </ha-icon><span>${entity.state}°C</span>`
      ]]]

I tried an if loop where the icon is set, but this also just throws an error:

  battery: |
    [[[
      return `<ha-icon
        icon="{if (states['sensor.emma_tur_battery_2'].state <= 20) return "mdi:battery-high; else return "mdi:battery-low"}"
        style="height: 25px;">
        </ha-icon>`
    ]]]

with that nothing is shown:

Hope someone can get me out of this.

Best regards,
goeste

[dcapslock]

Two options. Both of these require sensor to have device class of battery which then manages the battery icon. If this is not possible with yoru existing sensor then you will need to use a template sensor with device class of battery.

1. Use ha-state-icon. Difficult method.
2. Use a nested button-card. Easy and preferred. button-card uses ha-state-icon internally.

type: custom:button-card
name: Battery
styles:
  grid:
    - grid-template-areas: "\"n extra extra1\""
    - grid-template-columns: 1fr 1fr 1fr
custom_fields:
  extra: |
    [[[
      // Wait for updateComplete
      this.updateComplete.then(() => {
        if (!this.myExtra) {
          this.myExtra = true;
          let battery = states['sensor.door_battery'].state + '%'
          let stateIcon = document.createElement('ha-state-icon')
          stateIcon.hass = hass;
          stateIcon.stateObj = states['sensor.door_battery']
          stateIcon.stateValue = states['sensor.door_battery'].state
          stateIcon.style.setProperty('--mdc-icon-size', '50px')
          stateIcon.style.setProperty('--icon-primary-color', 'var(--state-sensor-battery-medium-color)')
          this.shadowRoot.querySelector("#extra").append(stateIcon);
          let text = document.createElement("div")
          text.innerText = battery
          this.shadowRoot.querySelector("#extra").append(text);
        }
      });
      // Return a space to generate element
      return " ";
    ]]]
  extra1:
    card:
      type: custom:button-card
      entity: sensor.door_battery
      show_name: false
      show_state: true
      size: 50px