Fix Alarm badge icon that incorrectly shows "DISARM"

Feature Requests
1

Instructions to wife: “Click the DISARM button to ARM the security system”.

The icon for the alarm_control_panel component displays “DISARM” when it should be displaying a status of “DISARMED”. Apparently the trailing “ED” is being truncated due to lack of space which unfortunately gives this button a very confused meaning.

Perhaps just changing “DISARMED” to “Disarmed”, the smaller lower case characters will allow it to fit the space available for the icon?

EDIT: upon further inspection of the UI source, it may not be a truncation issue, but maybe just a typo? In either case, it appears the CSS for this icon label is forcing the text to be all caps.

<ha-icon></ha-icon> <div class="label big"> <span>Disarm</span> </div>

2

I guess you mean the badge icon?
Why not try and add the alarm to a group, it’ll then show like this:
image

3

Yes, I do mean the badge icon. I’ve added the entity “- alarm_control_panel.home_security” to both a security group as well as the default_view group and both display the badge icon at the top instead of an ha-card as you’ve shown.

I actually prefer the compactness of the badge icon, but as a workaround to this confused icon label, I would sure appreciate a tip on how to force the alarm panel entity to display in a card.

4

add the alarm to a group and then add the group to one of your views.

5

OK, got it - thanks! Since I had included the alarm entity in a grouping, it wasn’t clear what else could be done. But now I understand that the entity must be in a “group.xxxx” group in order to be in an ha-card, not merely added to a group.yaml group section.

I still would like for the badge icon label to be fixed.

6

Yes, maybe a picture would make it more clear.
image
The state of this alarm is “disarmed”. This badge is very confusing :slight_smile: