I’m posting this as a feature request since I couldn’t find any solutions to this.
I want to have a badge (in thebadgessection of aview) where the icon’s colour reflects the state.
As an analogy, when you put e.g. a light entity in an entity card, by default the icon will turn yellow when it’s on.
This is not the case where others are recreating badges on cards to look like the Lovelace built-in functionality. The solution to this seems to be the Custom UI add-on.
For binary sensors, there is a default behaviour that changes the icon but not the colour. E.g. the built-in updater binary sensor will switch between a circle (when there is no update available) and a checkmark (when there is an update available). This works well and is a good default.
However, when wanting to use custom icons, a colour might emphasise the state better. In my case, I have binary sensors to indicate e.g. whether anybody is home, the Internet is connected and whether my electricity feed is on (the latter is necessary as I live in a country where “load shedding” is a thing).
To follow the existing pattern, I’ve chosen some custom icons:
mdi:home-account vs mdi:home
mdi:power-plug vs mdi:power-plug-off
mdi:server-network vs mdi:server-network-off
mdi:motion-sensor vs mdi:walk
I then define template binary sensors like this one:
Badges don’t get much love in standard Lovelace, and card_mod is probably your best option. See here for how to style badges. It doesn’t require custom_ui, which is no longer maintained.
Agreed that it would be nice to have more flexible badge support. I, and many others, just moved to panel mode and built “badges” with a set of button cards or something similar. Much more flexible, but also a bit more work to get going.
Thank you for completing the picture and bringing mod_card to my attention. I’ve glanced over it before and saw it mentioned a few times on the custom button card thread, but haven’t checked it out thoroughly.
It’s an interesting alternative to style the badge itself. I’ll give it some thought too.
I quickly hacked this together (keeping my icons from before):
badges:
- entity: binary_sensor.motion_detected
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.value: |
ha-icon {
color: {% if is_state('binary_sensor.motion_detected', 'on') %} red {% else %} green {% endif %} !important;
}
Now the icon changes and turns it red if on. If there is a better or shorter way to achieve the same results, I’d be keen to learn.
That may be what you need to color the icon and not just the outline. card_mod often requires some experimentation to get what you want, but you can usually get there. I hear a new version is coming soon.
Most of the time, card-mod won’t cause any errors: the styles simply won’t be applied. You will need to inspect and manipulate the DOM by hand in your browser to try and figure out what is wrong. I’m running 2022.2.9 with card-mod 3.1.2. Maybe it’s something with your versions.