Resolved: Buttons with two icons - one for each state?

Share your Projects! Dashboards & Frontend
1

I’m a recent migrant from SmartThings and ActionTiles. One thing that I really liked was that light icons had two icons - one for on and one for off. Not just coloring the icon. For example in this screenshot, look at the switch in the upper left. See how the switch actually moved to the other side when it’s on? The same thing happens with the door switches. Is there any way to get this to happen without all sorts of code? It would be cool if the default light, door, and window icons did this by default.

62517497177__83897DFF-B449-4B48-B159-767FFA1E51CA
62517497177__83897DFF-B449-4B48-B159-767FFA1E51CA2016×1512 913 KB

2

I’ve been using Custom Button Cards: custom-cards/button-card: :sparkle: Lovelace button-card for home assistant (github.com)
They allow you to not only have different icons, based on state, but also different colors and so on. There’s even a thread that shows you a lot of uses and configurations:
Fun with cutom:button-card - Share your Projects! / Lovelace & Frontend - Home Assistant Community (home-assistant.io)

3 Likes
3

Awesome, thank you. I’ll take a look and see what I can come up with out of that! :slight_smile:

-Alli

4

So magic?
No HA is not magic, although in some cases you actually think about.

I believe what you want is mdi:toggle-switch-off-outline and mdi:toggle-switch.

You can add them in the customization, something like this:

customize:
  light.lightbulb:
    templates:
      icon: if(state === 'on') return 'mdi:toggle-switch'; if(state === 'off') return 'mdi:toggle-switch-off-outline';
      icon_color: if(state === 'on') return 'rgb(255,255,0)'; if(state === 'off') return 'rgb(255,0,0)';
4 Likes
5

I tried to use this and I can’t get it to work. Do I have to have any additional things to make it work? I was reading about an add on called “Custom UI” - do I need that to make this work? Cause right now it doesn’t do anything. I also don’t get any errors either.

This is the code I put in customize.yaml:

binary_sensor.garage_main_door_closed_sensor:
  device_class: door

switch.front_porch_light:
  templates:
    icon: >
      if(state === 'on') return 'mdi:toggle-switch';
      if(state === 'off') return 'mdi:toggle-switch-off-outline';
    
    icon_color: >
      if(state === 'on') return 'rgb(255,255,0)';
      if(state === 'off') return 'rgb(255,0,0)';
6

I figured out that I needed to install something called “Custom UI”. The original dev went MIA so there are others that are keeping it updated. I installed the latest version from this page and it is working on HA version 2020.12.0. just fine with the code above.