Change card icon color based on state attribute

Long time listener, first time caller…

I have a mushroom chips card, with 5 action buttons to alter the state attribute ‘percentage’ between off and 1 of 4 (0, 25, 50, etc) different speeds. What I’m trying to accomplish is having the buttons change color based on the value of the ‘percentage’ attribute.

After searching/reading, I have this bit working as expected in the template editor:
{% if is_state_attr("fan.mbr_fan","percentage",100) %} green {%- else -%} grey {%- endif %}

When I paste it into the code editor:

type: custom:mushroom-chips-card
chips:
  - type: action
    icon: mdi:fan-off
    icon_color: |-
      {% if is_state_attr("fan.mbr_fan","percentage",0) %}
      red
      {%- else -%}
      grey
      {%- endif %}
    tap_action:
      action: call-service
      service: fan.turn_off
      data: {}
      target:
        device_id: 35e7dbc5cb4dd1a5bcfeca6ca207e309
  - type: action
    icon: mdi:fan-speed-1
    tap_action:
      action: call-service
      service: fan.set_percentage
      data:
        percentage: 25
      target:
        device_id: 35e7dbc5cb4dd1a5bcfeca6ca207e309
  - type: action
    icon: mdi:fan-speed-2
    tap_action:
      action: call-service
      service: fan.set_percentage
      data:
        percentage: 50
      target:
        device_id: 35e7dbc5cb4dd1a5bcfeca6ca207e309
  - type: action
    icon: mdi:fan-speed-3
    tap_action:
      action: call-service
      service: fan.set_percentage
      data:
        percentage: 75
      target:
        device_id: 35e7dbc5cb4dd1a5bcfeca6ca207e309
  - type: action
    icon: mdi:fan
    tap_action:
      action: call-service
      service: fan.set_percentage
      data:
        percentage: 100
      target:
        device_id: 35e7dbc5cb4dd1a5bcfeca6ca207e309
    icon_color: |-
      {% if is_state_attr("fan.mbr_fan","percentage",100) %}
      green
      {%- else -%}
      grey
      {%- endif %}
alignment: center

The icon does not change. If I replace the if then formula with a simple color, the icon changes.
Just wondering what I might be missing here? in my head, it makes sense, but I’m new to YAML, so not entirely clear on some of the structure.
Thanks in advance for any advice on this.

1 Like

The action chip doesn’t support templates. Use the template chip instead.

1 Like

Money… thanks!