Changing icon colors

Configuration
1

Hi,

I’m busy configuring HA and just added my Nest Protects to the frontend. In all the Nest-apps, the status of the Smoke/CO-detectors are primarily depticted by a colored circle. Circle is green when all is OK, yellow with a CO-alarm an red with a smoke alarm.

I currently have a circle-icon from Google’s material icons in front of the statuses:

Screenshot 2016-09-07 03.12.50.png1018×168 9.02 KB

What I’d like to do is change the color of the icons to match the status. Does anyone know how to change the color of the icons? I’ve seen screenshots of colored mdi’s but can’t seem to find a way to change the color myself.

2

I think you’d have to dig into the CSS to do this. Unfortunately you’ll have to add your changes back in after each update as it will get overwritten.

3

Well, if you use a template binary sensor for those values then you can get at least an icon change.

1 Like
4

I did see a feature request for the ability to specify different on and off icons or entity pictures; perhaps you can add your vote.

5

I’m giving @fabaff’s idea a try, changing icon would do, too.

@rpitera I think I ran into the topic you mentioned, I’ll add my vote.

Thanks for your input.

1 Like