Change the colour of chips card icon

Configuration Frontend
1

Change the colour of chips card icon

Hello, I’m trying to change the colour of a icon on a chips card, it’s a light entity and this is what I have, but the colour is always grey.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: light.shelly1pmmini_6055f99ff5d0_switch_0
    content_info: none
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: ""
    icon_color: >-
      {{ 'green' if states(‘light.shelly1pmmini_6055f99ff5d0_switch_0’) == 'on'
      else 'red' }}
2

Bump!
Anyone that know if this is possible? I think I already had this working some time ago, but I can’t find a working solution.

3

Try changing the type: to “template”, assign a specific icon, and then add the template as written below. I used your light entity in my example so you should be a able to copy and paste it. It worked for me so it should work for you. Let me know…

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: light.shelly1pmmini_6055f99ff5d0_switch_0
    icon: mdi:light-switch
    icon_color: |
      {% if states('light.shelly1pmmini_6055f99ff5d0_switch_0') == 'on' %}
        red  
      {% else %}
        green
      {% endif %}
    content_info: none
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
4

would this work for a temp sensor? i woiuld like it to show as blue if its below say 10 celcius and orage between 10 and 30 and red if above 30?

type: entity
entity: sensor.computer_room_temp_sensor
icon_color: accent
5

No, accent would not be recognized.

Try something like this…

icon_color: |-
{% set state = states('sensor.computer_room_temp_sensor') |int(-1) %}
{% if state >= 50 %} red
{% elif state >= 30 %} orange
{% else %}blue
{% endif %}
1 Like
6

thanks for getting back to me so quickly. I have pasted this in but i get the below error

missed comma between flow collection entries (4:2)

 1 | type: entity
 2 | entity: sensor.computer_room_temp ...
 3 | icon_color: |-
 4 | {% set state = states('sensor.com ...
------^
 5 | {% if state >= 50 %} red
 6 | {% elif state >= 30 %} orange
7

Post the coded vs the error please

1 Like
8 
type: entity
entity: sensor.computer_room_temp_sensor
icon_color: |-
{% set state = states('sensor.computer_room_temp_sensor') |int(-1) %}
{% if state >= 50 %} red
{% elif state >= 30 %} orange
{% else %}blue
{% endif %}
9

The chip entity card doesn’t allow templating in the icon-color: field so you need to switch the chip type to template or use card_mod

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.computer_room_temp_sensor
    icon: mdi:thermometer
    icon_color: |
      {% set state = states('sensor.computer_room_temp_sensor') | int(-1) %}
      {% if state >= 50 %} red
      {% elif state >= 30 %} orange
      {% else %}
      blue
      {% endif %}
1 Like
10

Im not getting any error however, the chip is not displaying

image
image992×528 21.1 KB

11

Try it in its own card to eliminate other coding errors and post the entire chips card code.

The code works

image
image1126×780 41.6 KB

Even if the icon_color code was wrong the device would still show up, just white.

1 Like
12

as you said, certainly works in its own card. can it still show to temp number eg 27.5

13

Yes, I’ll post an example

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.computer_room_temp_sensor
    icon: mdi:thermometer
    content: |
      {{ states('sensor.computer_room_temp_sensor') | int(-1)}} °C
    icon_color: |
      {% set state = states('sensor.computer_room_temp_sensor') | int(-1) %}
      {% if state >= 50 %} red
      {% elif state >= 30 %} orange
      {% else %}
      blue
      {% endif %}
1 Like
14

absolute superstar! I was able to get it into my other chip card as well!

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.computer_room_humidity
  - type: template
    entity: sensor.computer_room_temp_sensor
    icon: mdi:thermometer
    icon_color: |
      {% set state = states('sensor.computer_room_temp_sensor') | int(-1) %}
      {% if state >= 30 %} red
      {% elif state >= 18 %} orange
      {% else %}
      blue
      {% endif %}
    content: "{{ states('sensor.computer_room_temp_sensor') | int(-1)}} °C"
  - type: template
    icon: |-
      {% if is_state('binary_sensor.computer_room_window', 'off') %}
        mdi:window-open
      {% else %}
        mdi:window-closed
      {% endif %}
    content: |-
      {% if is_state('binary_sensor.computer_room_window', 'off') %}
        Closed
      {% else %}
        Open
      {% endif %}
    icon_color: |-
      {% if is_state('binary_sensor.computer_room_window', 'off') %}
        green
      {% else %}
        yellow
      {% endif %}
    tap_action:
      action: more-info
    entity: binary_sensor.computer_room_window
alignment: center
1 Like