Mushroom chips card doesn't change colour

Configuration Frontend
1

I’m trying to change the color of this chip cards but it doesn’t work:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.m2007j22g_battery_level
    use_entity_picture: true
    icon_color: "{{ 'green' if states('sensor.m2007j22g_battery_level') > '20' else 'red' }}"

Where is the issue?

2

Hello, you want change the color of the icon ?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: >-
      {{ 'mdi:battery' if states('sensor.battery_level') > '20' else
      'mdi:battery-20' }}
    entity: sensor.temperature_salon
    icon_color: "{{ 'green' if states('sensor.battery_level') > '20' else 'red' }}"
    content: "{{ states('sensor.battery_level') }}%"
    picture: ""
1 Like
3

Perfect. It works.
But when battery level is = 100, the icon is red, why?

4

And voila, even better with intermediate color (orange)

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: >-
      {% if states('input_number.test') | float > 60 %} mdi:battery {% elif
      states('input_number.test') | float > 20 %} mdi:battery-50 {% else %}
      mdi:battery-20 {% endif %}
    entity: input_number.test
    icon_color: >-
      {% if states('input_number.test') | float > 60 %} green {% elif
      states('input_number.test') | float > 20 %} orange {% else %} red {% endif
      %}
    content: "{{ states('input_number.test') }}%"
    picture: ""

image
image
image

5

If you want a detailed battery :

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: >-
      {% if states('input_number.test') | float > 99 %} mdi:battery {% elif
      states('input_number.test') | float > 90 %} mdi:battery-90 {% elif
      states('input_number.test') | float > 80 %} mdi:battery-80 {% elif
      states('input_number.test') | float > 70 %} mdi:battery-70 {% elif
      states('input_number.test') | float > 60 %} mdi:battery-60 {% elif
      states('input_number.test') | float > 50 %} mdi:battery-50 {% elif
      states('input_number.test') | float > 40 %} mdi:battery-40 {% elif
      states('input_number.test') | float > 30 %} mdi:battery-30 {% elif
      states('input_number.test') | float > 20 %} mdi:battery-20 {% elif
      states('input_number.test') | float > 10 %} mdi:battery-10 {% else %}
      mdi:battery-outline {% endif %}
    entity: input_number.test
    icon_color: >-
      {% if states('input_number.test') | float > 60 %} green {% elif
      states('input_number.test') | float > 30 %} orange {% else %} red {%
      endif %}
    content: "{{ states('input_number.test') }}%"
    picture: ""

You can change color for any% if you want, like that :

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: >-
      {% if states('input_number.test') | float > 99 %} mdi:battery {% elif
      states('input_number.test') | float > 90 %} mdi:battery-90 {% elif
      states('input_number.test') | float > 80 %} mdi:battery-80 {% elif
      states('input_number.test') | float > 70 %} mdi:battery-70 {% elif
      states('input_number.test') | float > 60 %} mdi:battery-60 {% elif
      states('input_number.test') | float > 50 %} mdi:battery-50 {% elif
      states('input_number.test') | float > 40 %} mdi:battery-40 {% elif
      states('input_number.test') | float > 30 %} mdi:battery-30 {% elif
      states('input_number.test') | float > 20 %} mdi:battery-20 {% elif
      states('input_number.test') | float > 10 %} mdi:battery-10 {% else %}
      mdi:battery-outline {% endif %}
    entity: input_number.test
    icon_color: >-
      {% if states('input_number.test') | float > 69 %} green {% elif
      states('input_number.test') | float > 50 %} amber {% elif
      states('input_number.test') | float > 35 %} orange {% elif
      states('input_number.test') | float > 20 %} deep-orange {% else %} red {% endif
      %}
    content: "{{ states('input_number.test') }}%"
    picture: ""