Badges - state color of icon following binary sensor does not appear correctly with HA 2024.10

[mrtoy-me]

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

I had some badges setup inside a section view prior to 2024.10.1 that were following binary sensor state and I had the icon changing color based on state. After upgrade to 2024.10.1 (from 2024.9.x) when I edit the badge and go to appearance the color is blank but it shows the icon yellow for the binary sensor as it should.

If I choose now choose state color instead the icon appears black

If I cancel that and scroll down there is a blank color option - but once I select a new color that blank color is no longer in the menu.

I have setup a new header card with the same features for the icon - state color following binary sensor state and it works fine ie correct yellow on binary sensor active. If it is relevant I am using IOS companion app and tried on windows firefox with same result.

Describe the behavior you expected

I expected the icon to be yellow when binary sensor is on as it did and does with the new header card.

Steps to reproduce the issue

1. It was most evident when transitioning from 2024.9. to 2024.10 when badges were setup in 2024.9 where icon state color follows state of binary sensor
2. 2024.10 when badge where icon state color follows state of binary sensor

3. ...

What version of Home Assistant Core has the issue?

2024.10.1

What was the last working version of Home Assistant Core?

2024.9

In which browser are you experiencing the issue with?

IOS companion app and Windows Fireox

Which operating system are you using to run this browser?

IOS 17.6.1 and Window 11

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[lisz8]

I think this problem affects entities that change the icon color themselves. E.g. covers, presence sensors, etc. I encountered this problem with header badges: the ha-state-icon within ha-heading-badge has the following code:

::slotted([slot="icon"]) {
  --ha-icon-display: block;
  color: var(--icon-color,inherit);
}

However, for the entities mentioned above, the --icon-color variable is not set, while for other entities it is set according to the user's settings.

[mrtoy-me]

The entities where I see this are all template binary sensors (configured in yaml).

I think though, you might have given me a hint I needed. I have not configured a device_class when I setup the template binary sensors - just testing now by adding an appropriate device_class.