This is really annoying as I have crawled through literally all posts about this topic only ending up with the wrong icon, and it does not change color according to the template.
I have verified the states are indeed locked and unlocked.
Icon is the standard mdi:lock icon, which presumably originates from the lock domain.
This will only work if you have custom_ui installed, which is no longer actively maintained and is generally deprecated. Dynamically changing icon and color needs to either be part of a template sensor/switch/etc. definition, or part of the Lovelace card that’s displaying it.
OK. So what you’re saying is dynamically changing icons only can be set through a Lovelace card, even if I can set the icon for several devices as per the documentation like this:
you have to be careful with state customization. As I see the opening post, you customize the icon on the actual state of the entity, but then customize that state to show something else (translation). After which the entity has another state… and the icon template won’t work anymore.
My advice (as was Andrey 's in the original custom-ui too): be very careful using state customizations. They interfere with the actual state machine and can cause unexpected behavior.
OK. So apart from that state-part (below) it should work setting the icons as per state as in my original post, you say?
I have tried that approach too… no luck there.
state: >
if (state === 'locked') return 'Låst';
return 'Ulåst';
of course, depending on your custom card styling, you need to change settings. custom-ui sets the entities properties, not the custom card functionality. Though, the customized icon should show if you dont use any setting at all in the button card.
does it work in a regular entities card for those 2 ? (suppose it does considering the more-info popup you have)
Id suggest creating a template for that, and using that template on all buttons for the domain you want. this template would then come close to being a _glob, since you can use it on all entities you like, by simply calling it.
or, if needed , on an individual button, simply use the exact same template (it also uses javascript) on the icon_color attribute.
Thank you, @Mariusthvdb for helping me out.
I now realize we are talking about different button cards; I was referring to the type: button while you were assuming I was using type: 'custom:button-card'
The latter has tons of paremeters to adjust color and status appearance or the button. I will look into this.
I want my window icon change color depending if its open (orange) or closed (green), so far no problem, this works.
But now I want my icon change color depending if its closed (green), opened and the state of my alarm system so Window open and alarm disarmed color is orange, Window is open and alarm is armed the color should be red.
Reading a lot of post didn’t brought me an answer, i came across is_state() and states() tried a lot of variants with those functions, however I don’t get it to work…
the latest attempt was:
binary_sensor.raam*:
device_class: window
templates:
icon: >
if (state == 'on') return 'mdi:window-open'; return 'mdi:window-closed';
icon_color: >
if (state == 'unavailable') return 'grey';
if (state == 'on')
{
if (is_state('alarm_control_panel.alarmo', 'disarmed')
return 'orange';
else
return 'red';
}
return 'green';
the fact that the icon doesn’t change color at all tells me this is clearly not the way…
Any help would be appreciated. Thanks in advance.
Regards Frank
Given the fact you say the regular icon_color template works, I take it you did install custom-ui?
if so, try:
icon_color: >
if (state == 'unavailable') return 'grey';
if (state == 'on' && is_state('alarm_control_panel.alarmo', 'disarmed') return 'orange';
if (state == 'on' && is_state('alarm_control_panel.alarmo', 'armed') return 'red';
return 'green'; # closed (but beware it will also be if none of the above if's are true)
so maybe better to do:
icon_color: >
if (state == 'unavailable') return 'grey';
if (state == 'off') return 'green';
if (state == 'on' && is_state('alarm_control_panel.alarmo', 'disarmed') return 'orange';
if (state == 'on' && is_state('alarm_control_panel.alarmo', 'armed') return 'red';
return 'purple'; # none of the above if's are true)
excuse the naming ‘Bovenlicht’ it has nothing to do with lamps or lights it simply refers to the upper
window.
as you can see the icon color gets no value at all, even not the purple value you suggested, the yellow and blue-ish are default theme colors. they do change if open (upper yellow icon) or closed (middle blue-ish icon), so part of it is working.
i m so sorry, I wrote way too fast and used the jinja ‘is_state()’ function… (copied from your own post). This can not be used of course… we need JS templates. duh.
icon_color: >
if (state == 'unavailable') return 'grey';
if (state == 'off') return 'green';
if (state == 'on' && entities['alarm_control_panel.alarmo'].state == 'disarmed') return 'orange';
if (state == 'on' && entities['alarm_control_panel.alarmo'].state == 'armed') return 'red';
return 'purple'; # none of the above if's are true)
Thanks so much, its working, didn’t encounter the entities[’’].state option in my search, but as you mentioned this is JavaScript. Is there a source document which language to use where within HA. I get rather confused we’re talking jinja, javascript, python, which goes where and what methods to use.
