View Title/Icon with "badges"

Configuration Frontend
1

I’m looking for a way to display badges* on titles/icon in the view nav bar. In it’s simplest form, simply show/hide the badges based on a binary_sensor, like this (mock-up):

path880
path8801408×175 24.8 KB

I did not find any out-of-the-box Lovelace feature, nor a simple way to exchange the icon with/without badge, based on a sensor reading… Any hints how to achieve this?

*) Referring to “badges” in this context with reference to Material Design terminology, not Lovelace Badges.

2

image

Here

2 Likes
3

Wow. The true power of Home Assistant is its community.

Thanks!

1 Like
4

Ok, just gave this a try. I’m completely new to card-mod and have to get up to speed with this, hope you can give me a head start.

  1. I can’t get your example to work - comparing with other examples it seems to be missing the
 .: |

part?

  1. This works only by adapting the current / all themes to include the card-mod code?
5

Yes!!! Forgot to add when copy/pasted from my test theme)).
Corrected that post.

Yes, works only with card-mod installed and added “card-mod-theme” line:

my_theme:
  card-mod-theme: my_theme
  ...other code here