Lovelace missing badge icon for lock

I have a verisure alarm and lock. I added those as badges in ui-lovelace but only the alarm gets a proper icon in the badge. The lock “icon” just says “locked”/“unlocked”. In the state card the icon is the correct mdi:lock icon.

How can I make the lock icon (or lock-unlocked depending on state) show up in the badge?

I just finished doing it this way:

- platform: template
  sensors:
    gardengate:
      value_template: "{{ 'Closed' if is_state('sensor.gardengate_rev', 'off') else 'Open' }}"
#
      icon_template: '{%- if is_state("sensor.gardengate_rev", "off") %}mdi:lock{% else %}mdi:lock-open-outline{%- endif %}'

@chairstacker, thanks!

But I still don’t understand why I have to make extra sensor just to get an icon on a badge, it should be a simple configuration option (or even better, just use the standard icon).

1 Like

it should show up without you doing anything in lovelace. What card are you using?

I am not using a card, I am using a badge. ui-lovelace.yaml looks like this:

This results in the following:

But when I include the entity in a card it looks like this:

Ah, Yes. That’s because badges will display the state, not the icon.

@petro, I’m fine with it showing the state if I could have a lock icon as well. If you look at the alarm badge above it shows both an icon and a state. It would make sense if the lock badge was presented like that as the functionality is similar (in my case they are both part of the Verisure alarm system).

An alternative solution would be to allow templating in badges.

Yes, I understand your concern but badges do not allow what you want. Whoever made the component for your alarm specifically designed it to look that way with the badge. Badges will show states in the circle and units in the orange text area. An exception is the device_tracker badges that show an image and the state in the orange text area.

You’ll need to create a custom UI in order to achieve what you want.

This is not just Lovelace by the way, this is standard home assistant. They both behave the same way.

Thanks petro for the input.

I totally agree that this is not Lovelace-specific. The lock badge doesn’t show in the standard ui so the issue didn’t occur there.

I have now created a binary_sensor with an icon_template and (almost) everything works as it should. The only issue now is that custom_ui most likely haven’t been updated to reflect the inverted lock_state introduced in 0.73. The badge shows the correct state (unlock = off) and icon but when I click on the badge to get the popup state card the icon is shown correctly but the action on the right is not. See images below. “Låst”/“Lås” means “Locked”/“Lock” in Swedish.

Badge: (correct)
image

State card: (correct)
image

Pop up state card when I click on the badge: (incorrect)
image

thanks for information worked