Ha-label-badge no longer showing icons

I have a custom Lovelace card which uses ha-label-badge and styles to show various icons. It was working fine previously, but now the icons no longer show. Is anyone aware of anything that might have changed since 2011.06 that causes icons such as mdi:lock-open in an ha-label-badge to no longer appear?

I’ve tracked it down to release 2011.10.1. 2011.9.7 still works fine. However other than the MDI icons being updated (mine aren’t in the list of deprecated icons) I can’t see from the changeling what might be causing the issue.

Here’s an example of the published code in Safari:

<ha-label-badge icon="mdi:mailbox-up" style="margin-right: 5px;  color: var(--paper-item-icon-color);"></ha-label-badge>

I think I’ve found the issue - am I right to understand that icon has been deleted from ha-label-badge as of this commit: Remove ha-icon from ha-label-badge by bramkragten · Pull Request #10182 · home-assistant/frontend · GitHub?

If so, is there a way to reimplement using MDI icons as the ‘image’ in an ha-label-badge?

1 Like

I had the same in one of my custom cards.
Try adding a ha-icon tag within the ha-label-badge tag.

I am also having the similar issue with my badges that have custom icons, the value of sensor is not being displayed after HA upgrade from 2021.10.7 to 2021.11.1. See the screen shot and comparison of badges between the red square boxes in left & right image.

For example in the image above from my dev environment on the left and prod on the right running two different versions of HA. The season sensor does not show the value of sensor **Autumn** above customer icon image in version 2021.11.1:

    friendly_name_template: "{{ states('sensor.season').title() }}"
    value_template: "{{  states('sensor.season').title() }}"
    entity_picture_template: "{% set state = states('sensor.season').title() %} {{ '/local/{}.png'.format(state) }}"

Same issue with my current UV Index badge & few others, don’t show value after upgrade:

    friendly_name_template: "Today {{ states('sensor.max_uv_index') | round(1) }} Max"
    value_template: "{{ states('sensor.current_uv_index') | round(1) }}"
    entity_picture_template: "/local/UVI/{% if states('sensor.current_uv_index')| round(1) == 0 %}grey{% elif states('sensor.current_uv_index') <= '2' %}green{% elif states('sensor.current_uv_index') <= '5' %}yellow{% elif states('sensor.current_uv_index') <= '7' %}orange{% elif states('sensor.current_uv_index') <= '10' %}red{% else %}purple{% endif %}.png"
    unit_of_measurement: 'UVI'

Not sure what is causing this?