Introduction
It’s very useful to make the actual state visible with icon changing depending on it.
During my research on how to make cards with state-dependent icons, I was founding explanations on how to change icons with additional plugins or write custom templates only.
But Home Assistant has this functionality out of the box. Unfortunately, it’s a bit tricky, so, I decided to write this guide.
Configuration
Let’s try to create the card with icons that will be changed depending on an entity state.
The virtual entity “input_bulean” will be used for the example, but this approach is applicable to any other entity.
First of all, go to Settings -> Devices & Services -> Helpers, click on “+ Create Helper” button, and choose Toggle:
Name your helper and choose an icon for it.
Now we are ready to create a card for your helper with different icons for “ON” and “OFF” states.
Actually, we need different cards for each state (two in this case), so the best way is to use a horizontal or vertical container.
Let’s try a horizontal one for the example.
Go to your Lovelace (dashboard), switch to Edit mode, and click “+ ADD CARD” button.
Let’s add the first conditional card to the stack, which will be displayed for “ON” state.
Please choose our helper “Game_mode” and “State is equal to” is “on”. The “state” field is sensitive for uppercase and lowercase options.
The helper’s states are lowercase. But, don’t forget to check the actual states for other entities and devises in Home Assistant Developer Tool.
Switch to “CARD” tab in the condition card settings, add a Button card, choose “Game_mode” entity, and add an icon for the “on” state.
Don’t warry if you don’t see your button card in the preview.
By default, a newly created “input_boolean” is in the “off” state. So, your card for the “on” shouldn’t be visible.
Add one more cardholder to your horizontal stack and place a conditional card where, choose our helper “Game_mode” and “State is equal to” is “off”. Please remember that “state” field is sensitive for uppercase and lowercase options.
Switch to “CARD” tab in the condition card settings, add a Button card, choose “Game_mode” entity, and add an icon for the “off” state.
You should see the icon on right (preview) pannel of the Horizontal Stack Card Configuration window for the current “off” state.
The preview panel os clickable. So, you can click onto your button and change the state of your helper.
The icon should be changed:
Click “SAVE” button on Horizontal Stack Card Configuration.
As a result, I’ll see two buttons: for “on” and “off” states simultaneously:
It looks disappointing and far from the expected result, doesn’t it?
So, a little magic is needed here!
Click on “DONE” button on the right-top corner and exit from Edit mode.
Now, should see only one button with an icon, which depended on your helper state:
Please feel free to ask any questions in the comments.
