Custom: button-card - change icon based on state

Configuration Frontend
25

THNX I was doing stupid

26

Hi, it’s been a while, but I am just getting into custom:button-card and I would like to know how or where I set the colors for var(–icon-dark-color) and var(–icon-color), but I can’t see it in your example.
Is it in the theme? What if I want to customize it for each card?

28

Sorry… Yes in the theme:

  icon-dark-color: "black"
29

Awesome, thanks.

30

OK, I have followed this post well, but I have another question I am trying to change the icon based on whether the volume is muted or not, I’m not sure where to put it.

type: custom:button-card
entity: media_player.rx_v483_fba621
tap_action:
  action: call-service
  service: media_player.volume_mute
  service_data:
    entity_id: media_player.rx_v483_fba621
    is_volume_muted: |
      [[[
        return (states['media_player.rx_v483_fba621'].attributes.is_volume_muted) ? false : true;
      ]]]
31

Here is an example for changing icon based on state from my configuration:

  - type: custom:button-card
    entity: switch.chauffe_eau_cuisine
    icon: >
              [[[ if (entity.state == "on") return "mdi:water-boiler";
                  else return "mdi:water-boiler-off"; ]]]
1 Like
32

I have followed this thread and tried a number of examples. I am new to HA and I am getting something wrong, but for the life of me I am not sure why it doesn’t work.

I want to change the ICON based on the state of the door sensor, and the COLOR based on the state of that sensor and light sensor, as follows:

if sensor.garage_door == OPEN then
    set icon to open garage
    set color to red
else
   set icon to closed garage
   if sensor.garage_lights == ON then
        set color to orange
   else
        set color to green
   endif
endif

I started slow, and I got icons and colors to change based on one sensor:

cards:
  - show_name: true
    show_icon: true
    type: custom:button-card
    entity: binary_sensor.garage_door_kiabmw
    name: Garage
    tap_action:
      action: navigate
      navigation_path: /dashboard-garage
    state:
      - value: 'on'
        icon: mdi:garage-open-variant
        color: red
      - value: 'off'
        icon: mdi:garage-variant
        color: green

Now, I am close, and all I need to do is change that last “color: green” depending on the state of the lights. I tried the following (only showing the replacement for the last line above, so as not to make the post too long):

        color: >
          [[[
            if (states['light.garage_light_all'].state == 'on') return "orange";
            else return "green";
          ]]]

But nothing would happen. I thought the problem was with the conditional, so I tried the following:

        color: '[[[ return "green"; ]]]'

and

        color: >
          [[[ 
            return "green"; 
          ]]]

But none of it worked, for some reason.

Then I took a different approach, and I used the following:

cards:
  - show_name: true
    show_icon: true
    type: custom:button-card
    entity: binary_sensor.garage_door_kiabmw
    name: Garage
    tap_action:
      action: navigate
      navigation_path: /dashboard-garage
    icon: >
      [[[
        if (entity.state == 'on')
          return "mdi:garage-open-variant";
        else
          return "mdi:garage-variant";
      ]]]
    color: >
      [[[
        if (entity.state == 'on')
          return "red";
        else if (states['light.garage_light_all'].state == 'on')
          return "orange";
        else
          return "green";
      ]]]

And the icon part worked perfectly well, but the color part didn’t. That is, color did not change.

Not sure what I am doing wrong… Any advice much appreciated. Thanks

33

I was facing the same issue.
For some reason, the condition in "color: " was not taken into account.
But I found a working solution using "styles: ".

Based on your last example, you can try this :

cards:
  - show_name: true
    show_icon: true
    type: custom:button-card
    entity: binary_sensor.garage_door_kiabmw
    name: Garage
    tap_action:
      action: navigate
      navigation_path: /dashboard-garage
    icon: >
      [[[
        if (entity.state == 'on')
          return "mdi:garage-open-variant";
        else
          return "mdi:garage-variant";
      ]]]
    styles:
      icon:
        - color: >
            [[[
            if (entity.state == 'on')
              return "red";
            else if (states['light.garage_light_all'].state == 'on')
              return "orange";
            else
              return "green";
            ]]]

On my side I went with "states: " and "value: " which can be easier, so something like this :

cards:
  - show_name: true
    show_icon: true
    type: custom:button-card
    entity: binary_sensor.garage_door_kiabmw
    name: Garage
    tap_action:
      action: navigate
      navigation_path: /dashboard-garage
    state:
      - value: 'on'
        icon: mdi:garage-open-variant
        styles:
          icon:
            - color: red
      - value: 'off'
        icon: mdi:garage-variant
        styles:
          icon:
            - color: |
                [[[  
                if (states['light.garage_light_all'].state == 'on')
                  return "orange";
                else
                  return "green";
                ]]]
2 Likes