Icon changed by state

To start with: I am an newbee to HA. I have installed the most recent stable supervisor version. I am exploring and doing small test since a few weeks. It seems to be great, but takes some time to get experienced.
I run into what I thought an easy solvable issue: In The Lovelace UI I want to have a button that ‘simply’ uses 2 different icons, each for every state of the button. Standard it only changes from blue (‘Off’) to yellow (‘On’). What I want as an example mdi:garage (state of entity is ‘Off’) and mdi:garage-open (state of entity is ‘on’). I saw and read several articles in this forum as well as several others via google. But after a ew days of trying, I still cannot get it done. (lack of experience…).
It seems there are “many ways that lead to Rome”, but I was not able to find 1. The most easiest possibe way that I could read is using:
state_icon:
‘On’: mdi:garage-open
‘Off’: mdi:garage
I placed this bit of data/code in the raw configuration editor of a Lovelace dashboard, but no effect…

Other approaches seem to be via templates or scripts. But where to put this data/code? In configuration.yaml, customize.yaml,.?

Also bumped into github’s “custom-ui”. Do I need this as well?

I hope someone is willing to support with a easy to understand and implement solution.

The easiest way is to use a device class. Either in your entity definition or by using customise.

Is your button controlling a cover?

Tom, Thanks for helping out. I looked into it. I was already able (I tried some many things, I even don’t how I did it) to assign the “garage-door” device class to the entity. I I follow your link and look via the customization menu, the device is indeed garage-door. But I cannot see / understand further in the customization menu how to make the icon state depended. I will try first a few days.

Hi. For a newbee like me, who is searching for some simple solutions to start with. And by that learn better how HA is organised and what is all possible, this HA sub-website explained an easy solution for my state depending icon: Template Sensor - Home Assistant 中文网
So my solution is to define a 2nd sensor which does the trick

You don’t have to.

Applying the device class changes the state display in Lovelace (e.g. open instead of on) and applies an icon that will change with the state. Please share your config. For the customisation and original entity.

Sorry for late reply. I have been exploring a lot in HA. It seems I needed some time for learning curve. Your suggestion helped. I have it working now. Thanks!

1 Like

Hi guys, I know that this topic is solved but by adding some more details it can become even more useful because with the info here and searching docs, integrations and forum topics I cannot solve this.

So can any of you please elaborate a little on how to have 2 different icons for a switch?
I’m using a glance card with self created icons now but would like to use the default curtains (open & closed) icons.

Tnx