Small icon as badge?

[andredewaard]

For example I have these virtual switches that toggles if im in a meeting, or if the baby is sleeping. I show badges in the headers if these are on or not. But would be nice to show an indicator in the Navbar that these are on. So in stead of showing a badge in the Navbar it would be great to show a small sleep icon when the baby is sleeping.

[joseluis9595]

Hi @andredewaard , I'll mark this as a feature request, but I'm concerned about the size of the icon itself. To be able to display it inside the badge, it should be quite small, possibly making it hard to understand.

[andredewaard]

@joseluis9595 Thanks for answering. Tiles also have badges demonstrated here https://demo.home-assistant.io/#/lovelace/home on the climate tiles. I think to be consistent in styling they could be the same.

[nalpo]

I would love this feature too!

[Nicxe]

Hi! I gave this a try.

As you mentioned, the icon is quite small at this badge size, especially when using more detailed MDI icons. After testing it, however, I think it still works reasonably well, particularly with simpler icons.

I used a 16×16 px badge with a 12 px icon, matching the proportions used by Home Assistant's tile badges. I also added CSS variables so users can increase the badge or icon size if needed.

The implementation supports templated icons and colors, works for both regular routes and popup items, and preserves the existing dot and count badge behavior.

I have opened PR #319 with the proposed implementation in case you would like to take a look and think this is something that could be included in the card.

Here is a screenshot showing how it currently looks: