Anyway to change icon color in Lovelace based on state?

Hey guys, I hope someone figured this out already. Is there a way to change icon color based on entity state? For example, I want to change all my motion sensors to be red instead of yellow when motion is detected, or my light groups to become yellow if group is in the on state.

I am looking for something that I can add into customize_glob section of the config so I can match entities based on keywords.

I know there used to be CustomUI component to help with that, but as far as i know, it doesn’t work with Lovelace.

Thanks for the help!

custom_ui works just fine in Lovelace, and is the only universal way to do what you want. Some cards support more customization than others inherently, but custom_ui lets you do it en masse via globbing and such. Here’s an example from my customize_glob.yaml:

"group.*":
  templates:
    icon_color: if (state === 'on') return 'red'; else return 'green';

Just make sure to use the latest version that was released over the weekend because the recent change to browser feature detection broke the previous version.

Thanks man, I finally got it working. Had to clear the cache in my browser. Thanks so much!

No problem, glad it’s working. I wish there was a lighter-weight way to change icon colors that was less likely to break going forward, but I haven’t seen one. andrey has been pretty good at updating when there are breaking changes.

2 Likes

Have you had success with other features of Custom_ui and Lovelace for example light sliders or confirm_controls_show_lock or hiding additional attributes like value_instance from the popup. Or only the icon coloring works?