I’m trying to use icons on a card label. I want to have icons display if motion sensors activate. I used if statements but I want to display multiple across, depending on if multiple entities are activated. I can get 1 to display, and then I can add text to it. But I’m not sure how to use multiple if statements (or choose) to activate multiple icons. Or if there is a better way to do this. Once I get that figured out I’d like to be able to have it display the “last changed” state. So I might have a motion sensor icon + door open icon + “10 mins ago”. Or something like that. But my main issue is displaying multiple icons conditionally. Here is what I have (It’s the “label” section I’m struggling with):
- type: 'custom:button-card'
template:
- card_esh_room
- yellow_on
name: Office
icon: mdi:desktop-classic
tap_action:
action: navigate
navigation_path: 'office'
label: >
[[[
if (states["binary_sensor.office_motion_occupancy"].state == 'on')
return (`<ha-icon icon="mdi:home-outline" style="width: 16px; height: 16px; color: blue;"></ha-icon>`)
else if (states["binary_sensor.office_motion_occupancy"].state == 'off')
return (`<ha-icon icon="mdi:void" style="width: 16px; height: 16px; color: yellow;"></ha-icon>`)
]]]
Hi, for the icons according the state you can use:
state:
- value: ‘on’
- icon: mdi:youricon
- value: ‘off’
- icon: mdi:youricon
You can add -color: for the color two and the values you need
Thanks but I’m not sure that’ll fix it. I’m trying to set the label, not the card icon. So I want to use an image/icon on the label based on state. The card docs say I have to use either a string or html for the label. Is your solution correct, and if so, how do I put it into the code? I tried to nest it under the label header but it didn’t work. Thanks!
Try this
show_label: true
label: >
[[[
if (states["switch.ext_1_u"].state == 'on')
return (`<ha-icon icon="mdi:hockey-sticks" style="width: 16px; height: 16px; color: blue;"></ha-icon>`)
else if (states["switch.ext_1_u"].state == 'off')
return (`<ha-icon icon="mdi:hair-dryer" style="width: 16px; height: 16px; color: yellow;"></ha-icon>`)
]]]
… or just
show_label: true 
PS. And feel free to add as many multiple “else if” you want/need ( With an end if )
Well actually i dont use “else if” … just a bunch of if’s and an “else” in the end
This is almost what I need… but kinda what I already have I think. The problem is that it evaluates the if statement and if true, it stops evaluating the rest (I think). What I want it to do is test for occupancy, if true display an icon, test for motion, if true display another icon next to the first, test for something else, if false, display an other icon next to the previous one… So I can have multiple indicators all within the label section. Something like this:
But I can only get the first icon to display. Thanks again!
Correct
And i apparently misunderstood your question, it certainly puts it in another perspective 
An easy way would be to use additional “custom_fields”
Thanks! Tells me where to focus on. I’ll have a look at the custom_fields part of the docs to see if I can figure it out. Appreciate the help!
Ok, yes you need to use a grid I.E, and some CSS
styles:
grid:
- grid-template-areas: >-
"i i . ." "n n . ." "i1 i2 i3 i4"
custom_fields:
i1:
- whatever_CSS
- padding: 0px
- width: 20px
i2:
- same same
i3:
- same same
i4:
- same same
custom_fields:
i1: |
[[[
return `<span>*****</span>`
]]]
i2: |
[[[
return `<span>****</span>`
]]]
i3: |
[[[
return `<span>****</span>`
]]]
i4: |
[[[
return `<span>****</span>`
]]]
Sorry, very simplified, but report back when you got something