Custom: button-card - change icon based on state - presence [SOLVED]

[speed (master)]

Dear all,
I am trying to beautify my presence display/card. But I am failing to show the right icons/color based on the state.

This is the “old view” and representing the right states

This is the “new view” with right states but wrong icons/colors.

The code I am using is as follows:

square: true
type: grid
cards:
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: device_tracker.bernd_s20
        name: Bernd
        show_name: true
        show_icon: true
        show_state: true
        icon: |
          [[[
            if (entity.state === 'Zu Hause') return 'mdi:home-account';
            if (entity.state === 'Abwesend') return 'mdi:home-export-outline';
            else return 'mdi:flash';
          ]]]
        styles:
          grid:
            - grid-template-areas: '"n i" "s i" "l i"'
            - grid-template-columns: 1fr 40%
          icon:
            - color: |
                [[[
                  if (entity.state === 'Zu Hause') return 'green';
                  if (entity.state === 'Abwesend') return 'orange';
                  else return 'red';
                ]]]    
      - type: custom:button-card
        entity: device_tracker.ute_p20_2
        name: Ute
        show_name: true
        show_icon: true
        show_state: true
        icon: |
          [[[
            if (entity.state == 'Zu Hause') return 'mdi:home-account';
            if (entity.state == 'Abwesend') return 'mdi:home-export-outline';
            else return 'mdi:flash';
          ]]]
        styles:
          grid:
            - grid-template-areas: '"n i" "s i" "l i"'
            - grid-template-columns: 1fr 40%
          icon:
            - color: |
                [[[
                  if (entity.state == 'Zu Hause') return 'green';
                  if (entity.state == 'Abwesend') return 'orange';
                  else return 'red';
                ]]]    
      - type: custom:button-card
        entity: device_tracker.tim_a53_7
        name: Tim
        show_name: true
        show_icon: true
        show_state: true
        icon: |
          [[[
            if (entity.state == 'Zu Hause') return 'mdi:home-account';
            if (entity.state == 'Abwesend') return 'mdi:home-export-outline';
            else return 'mdi:flash';
          ]]]
        styles:
          grid:
            - grid-template-areas: '"n i" "s i" "l i"'
            - grid-template-columns: 1fr 40%
          icon:
            - color: |
                [[[
                  if (entity.state == 'Zu Hause') return 'green';
                  if (entity.state == 'Abwesend') return 'orange';
                  else return 'red';
                ]]]    
      - type: custom:button-card
        entity: device_tracker.felix_huawei
        name: Felix
        show_name: true
        show_icon: true
        show_state: true
        icon: |
          [[[
            if (entity.state == 'Zu Hause') return 'mdi:home-account';
            if (entity.state == 'Abwesend') return 'mdi:home-export-outline';
            else return 'mdi:flash';
          ]]]
        styles:
          grid:
            - grid-template-areas: '"n i" "s i" "l i"'
            - grid-template-columns: 1fr 40%
          icon:
            - color: |
                [[[
                  if (entity.state == 'Zu Hause') return 'green';
                  if (entity.state == 'Abwesend') return 'orange';
                  else return 'red';
                ]]]    
columns: 2

tried it with “==” and “===” - not working either…

Also tried

  [[[
    if (entity.state == 'Zu Hause') return 'mdi:home-account';
    else if (entity.state == 'Abwesend') return 'mdi:home-export-outline';
    else return 'mdi:flash';
  ]]]

[LiQuid_cOOled (Not really a...)]

@speed

'Zu Hause'

a few things:

1. Try double quotes like "Zu Hause" vs single quotes around your states.
2. Ensure that the states match Developer tools states.
3. Just use ==

Your code is fine, I tested it with 'on' and 'off' using your single quotes and received the expected results. With Capitalizations you have to use double quotes.

Code I tested with a light.

square: true
type: grid
cards:
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: light.bed_lights
        name: Bernd
        show_name: true
        show_icon: true
        show_state: true
        icon: |
          [[[
            if (entity.state == 'on') return 'mdi:home-account';
            if (entity.state == 'off') return 'mdi:home-export-outline';
            else return 'mdi:flash';
          ]]]
        styles:
          grid:
            - grid-template-areas: '"n i" "s i" "l i"'
            - grid-template-columns: 1fr 40%
          icon:
            - color: |
                [[[
                  if (entity.state == 'on') return 'green';
                  if (entity.state == 'off') return 'orange';
                  else return 'red';
                ]]] 

[speed (master)]

Hi LiQuid,
you made my day! #2 solved it - I was checking the state values multiple times, but only in Developer tools I saw the original/ English values (“home” not “Zu hause”). It works like a charm now!
THANKS A LOT!

issue solved