Change custom:button-card icon color based on input_boolean

1

I have the following custom button card

      - entity: script.tv_toggle
        type: custom:button-card
        template: icon_button_small
        tap_action:
          service: script.tv_toggle
        icon: mdi:television-off
        label: TV Power toggle
        show_label: true
        styles:
          label:
            - font-size: 0.65em

How can I change the color of the icon, based on the state of input_boolean.tv_switch I use the keep track of the status?

I have tried

      - entity: script.tv_toggle
        type: custom:button-card
        template: icon_button_small
        tap_action:
          service: script.tv_toggle
        icon: mdi:television-off
        label: TV Power toggle
        show_label: true
        styles:
          label:
            - font-size: 0.65em
          icon:
            - color: |
                [[[
                  if (input_boolean.tv_switch.state=='on')
                    return "Green";
                  else
                    return "Red";
                ]]]

but then the button disappears.

afbeelding

When I try this, the icon turns red

      - entity: script.tv_toggle
        type: custom:button-card
        template: icon_button_small
        tap_action:
          service: script.tv_toggle
        icon: mdi:television-off
        label: TV Power toggle
        show_label: true
        styles:
          label:
            - font-size: 0.65em
          icon:
            - color: >
                [[[
                  if (2> 42) {
                     return 'Green';
                  else { 
                     return 'Red';
                ]]]

afbeelding

Any tips on how to achieve this?

2

try this:

styles:
  icon:
    - color: >
        [[[
          if (states['input_boolean.tv_switch'].state == 'on')
            return "Green";
          else
            return "Red";
        ]]]

If this doesn’t work, also try ‘On’ (capital ‘O’)

3 Likes
3

Brilliant! That’s working

I keep struggling with the states concept.

1 Like
4

Glad to hear you’ve got it going! I takes me quite is bit of trial and error to get these things right!

1 Like