Heading Card entities icon colour not always applied

[circa1665]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.
• [ ] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

When selecting an icon colour for entities used in the heading card as a heading badge, the icon colour is not always applied:

For example I am able to change the colour of this icon:

But for some reason not this one:

Describe the behavior you expected

Selecting an icon colour should apply the colour to the icon.

Steps to reproduce the issue

1. Attempted to apply the colour red to the icon for a Climate entity using the visual editor.

What version of Home Assistant Core has the issue?

2024.10.4

What was the last working version of Home Assistant Core?

n/a

In which browser are you experiencing the issue with?

Safari 18.0.1 (20619.1.26.31.7)

Which operating system are you using to run this browser?

macOS 15.0.1

State of relevant entities

No response

Problem-relevant frontend configuration

Here's the YAML for the heading card in question:

type: heading
heading: Bedroom
heading_style: subtitle
icon: mdi:bed
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.bedroom_air_quality_humidity
    color: blue
  - type: entity
    show_state: true
    show_icon: true
    entity: climate.wiser_bedroom
    state_content: current_temperature
    visibility:
      - condition: state
        entity: binary_sensor.season_temp_threshold
        state: "off"
    icon: mdi:thermometer
    color: red
tap_action:
  action: navigate
  navigation_path: /lovelace/bedroom

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[ildar170975]

Do not confirm for 2024.10.4 + Chrome with climate entities provided by Demo integration:

type: heading
icon: mdi:fridge
heading: Kitchen
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: climate.ecobee
    color: accent
  - type: entity
    show_state: true
    show_icon: true
    entity: climate.heatpump
    color: red
  - type: entity
    show_state: true
    show_icon: true
    entity: climate.hvac
    color: green
heading_style: title

[karwosts]

Guessing that climate attributes are probably colored when the respective climate entity is an active state, and climate attributes are probably not-colored when the climate state is idle/off.

I think there might have been was another similar issue reported about something like this when using attributes in an entities card a while back.