add theme variable for View Badge icon / font size

[Mariusthvdb]

Please add a theme variable to set the icon size

because currently it is practically impossible to see the 64 in the processor badge. (and other icons ofc)

this seems out of balance, particularly because there is so much empty space left.

the icon is set with the generic --mdc-icon-size, so we can not set it in a theme either (because it sets the size for all regular icons too.)

since card-mod cant touch it either, my older eyes are lost on this...

unless there could be an introduction for eg --ha-badge-icon-size ofc, and use that in the themes.

imho this should have a place in the accessibility contemplations of the Frontend team.
please.

so at least the users with +4 glasses (...) can do:

notice how the increase of the icon-size (In Inspector, not card_mod) hardly impacts the total size of the badge. cant be a reason not to do so

funny thing is we Can do

ha-badge-size: 48px

which blows up the badge, but leaves the icons untouched....

[Mariusthvdb]

just learned in the community there is a (very convoluted custom ) way to do this:

  - type: custom:mod-card
    card:
      type: custom:hui-entity-badge
      show_name: false
      show_state: true
      show_icon: true
      entity: sensor.processor_use
    card_mod:
      style:
        hui-entity-badge:
          $: |
            ha-state-icon {
              --mdc-icon-size: 28px;
            }

needless to say this is fragile....
and would benefit tremendously if configured inside core HA frontend

[Mariusthvdb]

as per discussion in the community https://community.home-assistant.io/t/2024-8-beautiful-badges/757395/612?u=mariusthvdb

please also consider adding a theme variable for the font size of the badge

[c2bull]

I want this so much and I still cannot understand how the new badges got added without the ability to scale their size.

When I'm trying to read my temperature badge on my phone first thing in the morning it just doesn't work to have the tiniest font size available. And of course you can't pinch to zoom in the app (and you couldn't on the web page on mobile until I changed that feature inside mobile Firefox to allow me to).

It's just so user hostile to drastically change the badge size and not have any ability to fix it.