Skip to content

Changing icons for custom_fields based on condition #627

@Goeste

Description

@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
image

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:
image

Hope someone can get me out of this.

Best regards,
goeste

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions