Custom icons do not change color in home page

[tichaonax]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Custom mdi switch icons don't turn yellow on homepage . They show up on pop up window.

Describe the behavior you expected

When custom switch l expect on status to turn yellow in the home page. When you click on the item then you see yellow on the pop up window. This should be the behavior on the home page.

I am using standard mdi icons supported by HA and set that up during auto discovery.

Steps to reproduce the issue

Add autodiscoveredd mdi icon switch

What version of Home Assistant Core has the issue?

Home Assistant 2021.11.4

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

No response

Which operating system are you using to run this browser?

No response

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

[spacegaier]

Did you enable "Color icons based on state?" in the card editor?

[tichaonax]

Did you enable "Color icons based on state?" in the card editor?

No I have my configuration done through the auto-discovery feature of HA. I do not do any custom stuff on the Homeassistant UI. Here is my configuration that I register from my iot device on boot. Is there something I am missing that I need to include in the config. Everything works beautiful. I do pass the mdi icon in the config.

The only other concern is I wish the attributes would show after the history so I do not have to scroll all the way. The light switch have a separate tab for details and history and the attributes show under details which is perfect. Sometimes my history for the switches is long as they run on a schedule.

{
	"~": "homeassistant/switch/ch1-pin-5/e098060f98da",
	"name": "Irrigation Pump : e098060f98da",
	"unique_id": "switch-pin-5-e098060f98da",
	"json_attributes_topic": "~/state",
	"cmd_t": "~/set",
	"stat_t": "~/state",
	"icon": "mdi:water-pump",
	"payload_on": "{\"state\":\"ON\",\"iotAdminUrl\":\"http://192.168.0.186/project/auto/channelOne\",\"controlPin\":5,\"channelName\":\"Irrigation Pump\",\"MAC\":\"e098060f98da\",\"IP\":\"192.168.0.186\",\"startTime\":\"9:00\",\"endTime\":\"16:30\",\"overrideTime\":\"35m\",\"runEvery\":\"15m\",\"offAfter\":\"8m\"}",
	"payload_off": "{\"state\":\"OFF\",\"iotAdminUrl\":\"http://192.168.0.186/project/auto/channelOne\",\"controlPin\":5,\"channelName\":\"Irrigation Pump\",\"MAC\":\"e098060f98da\",\"IP\":\"192.168.0.186\",\"startTime\":\"9:00\",\"endTime\":\"16:30\",\"overrideTime\":\"35m\",\"runEvery\":\"15m\",\"offAfter\":\"8m\"}"
}

[tichaonax]

the config attributes above are dynamically created by the iot device based on its configuration. The attributes show up correctly in HA without a single configuration in HA. If I need to make config changes I click on the iotAdminUrl and that takes me to the device admin UI. After saving the device sends mqtt with new config settings. I do not need to know the IP address of the device if it changes or reboots it will republish its config. I love the HA auto discovery feature.

[spacegaier]

I am not talking about the specific device, but your Lovelace configuration. But it sounds like you are using the auto-generated Lovelace dashboard. In that case, there is no bug. This dashboard simply does not have the option enabled that would color the entity rows based on the state.

If you create a custom Lovelace dashboard you can enable that option.

BTW: This has nothing to do with custom or non-custom icons.

[tichaonax]

I am not talking about the specific device, but your Lovelace configuration. But it sounds like you are using the auto-generated Lovelace dashboard. In that case, there is no bug. This dashboard simply does not have the option enabled that would color the entity rows based on the state.

If you create a custom Lovelace dashboard you can enable that option.

BTW: This has nothing to do with custom or non-custom icons.

That is correct mine is autogenerated lovelace dashboard but still how come when you click on the item name if the switch was on it will show a yellow icon when the popup dialog shows which means it has a way to know that it is on.

I think its a bug of inconsistency.

[spacegaier]

That is just the way it is designed currently. In the more-info dialog (the popup when you click on the name) we always show the state color. For cards in a dashboard the creator controls the behavior and this icon state color logic can be enabled per card.

The auto-generated dashboard just does not use that. But I created the PR linked above that could change that, if other team members agree.

[tichaonax]

Thanks fair enough just to point out the light bulb behaves correctly in the auto-generated Lovelace it's just the switch type that's misbehaving. I missed that detail earlier if that helps.

[spacegaier]

Lights are a special case.

It is not only the switches. The same applies for binary sensors, sensors, calendar, covers, ...

[tichaonax]

OK is there a way that you could use the config data if its available.
"state_color" : true

This or any config attribute required to support I can pass it, that way it behaves similar to if user makes the change in the UI

[spacegaier]

You can set that in your dashboard config if take over control from HA. Otherwise, the HA defaults will take effect. We might potentially change that default for the auto-generated dashboard, depending of the feedback to my PR.

[tichaonax]

I want to use HA out of the box without changing its defaults. Lets see what comes of your PR. Thanks and have a good thanks giving.