icon_color, doesn't work for new badge in title, in section view.

[WarC0zes]

Describe the bug Hi, Since update 2024.10.0, badges can be used in the title, in section view. But the icon color doesn't change. The icon does change though.

Configuration in Yaml in customize.yaml

    binary_sensor.0x00158d0007ef4edc_contact:
      friendly_name: Porte Entrée
      templates:
        icon_color: >
          if (state == 'on') return '#ff0000';
          return '#00b300';
        icon: >
          if (state == 'on') return 'phu:panel-glass-door2-open';
          return 'phu:panel-glass-door2-close';

card code:

type: heading
heading: Salon
heading_style: title
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: binary_sensor.0x00158d0007ef4edc_contact
icon: mdi:sofa

Inspector Logs No log

Screenshots

[Mariusthvdb]

that probably is caused by the way HA Frontend is evolving.

Custom-ui is really supposed to be phased out, and new ways of coloring the icons should be found, preferably in core (please set a device_class: door there and you're set for changing state-color and icon!), and if not, by using card-mod.

We state as much in the opening Readme.

If anyone seeing this though is able to make a PR to correct this for the new Badges, we'd be willing to check it.

[WarC0zes]

and if not, by using card-mod.

Yes, with card_mod it's ok, but card_mod is a bit heavy. I avoid using it. I hope PR will be available to fix this.

type: heading
icon: mdi:fridge
heading_style: subtitle
heading: test
badges:
  - type: entity
    entity: sensor.date
  - type: entity
    entity: input_number.color_print_count
card_mod:
  style:
    .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
      ha-heading-badge {
        --icon-color: red;
      }
    .badges hui-heading-badge:nth-child(2) hui-entity-heading-badge $: |
      ha-heading-badge {
        --icon-color: green;
      }  

[Mariusthvdb]

see my edited response: set a device_class...

[WarC0zes]

see my edited response: set a device_class...

I already had a device_class: door

[Mariusthvdb]

right... if you have a device_class set, and the icons in the new Heading dont respect/reflect that, I would start by raising that as an issue in the Frontend repo. That would be surprising though.

However, you'd need to test that without the custom-ui templates, because those can be very strong and tend to override other core stuff.

so my advice: delete (comment) the custom-ui templates, change the state of the doors a few times, or, to be 100% sure, restart HA.

then check the icon in the heading (to the entity having a device_class)

if these icons are still not changing, open an issue in Frontend, as I suppose they should be reflecting the device_class settings.

update

tested that myself ;-)

the icons and state change , button icon_color needs an extra setting:

badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: binary_sensor.library_deur
    color: state

and you'll see it change color

[WarC0zes]

update

tested that myself ;-)

the icons and state change , button icon_color needs an extra setting:

badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: binary_sensor.library_deur
    color: state

and you'll see it change color

Yes, I had already tried, but the colors chosen in customize are not used. it's yellow when it should be red

[WarC0zes]

I found a solution, going through a theme. with:

  state-binary_sensor-active-color: red
  state-binary_sensor-inactive-color: green

[Mariusthvdb]

exactly. that is not A solution, but The solution, and what I meant you should do in the first place.

in stead of use active/inactive, use

    state-binary_sensor-door-off-color: green
    state-binary_sensor-door-on-color: red

because the other class targets all binaries..

Ill close this as 'not planned'

[WarC0zes]

in stead of use active/inactive, use

    state-binary_sensor-door-off-color: green
    state-binary_sensor-door-on-color: red

I'm an idiot, I tried with open/close. You're right with on/off.

state-binary_sensor-door-open-color: green
state-binary_sensor-door-close-color: green