Change color in state-icon based on the value of the state

Configuration Frontend
1

Hi, I am trying something that at first would seem very simple which is in a picture element in which I have a state-icon to change the color depending on the state. This value is a text string. I have tried multiple options (color, --paper-item-icon-color’, ‘–paper-item-icon-active-color’…) but I can’t find the code that works. My last attempt has been this one but nothing.


  - type: state-icon
    entity: sensor.itag_area
    icon: mdi:clock
    style:
      top: 67%
      left: 75%
      "--mdc-icon-size": 30px
      "--paper-item-icon-color": |-
        {% if is_state("sensor.itag_area", "Salon") %}
          green
        {% else %}
          red
        {% endif %} 
      "--paper-item-icon-active": |-
        {% if is_state("sensor.itag_area", "Salon") %}
          red
        {% else %}
          green
        {% endif %}

How would I have to code it so that in function of the value of the state of an entity the color of the state-icon changes?

Regards

2

google “picture elements small tutorial” → 1st post → conditional styles

3

Hi, As I read with the state-icon you have to use state-icon. If I put the color directly it works without problem. The problem is when I want to change the color depending on the value returned by a text type sensor.

By default for entities like “sensor” (same for “device_tracker”, “person”, “zone”, …) an icon’s color for the “state-icon” does not depend on the entity’s state.
The “–paper-item-icon-color” variable is used to change a color:

ok:

  '--paper-item-icon-color': red

This fails:

      '--paper-item-icon-color': |
        [[[  
          if (states[“sensor.itag_area”].state == 'Salon') return red; else return ;          
        ]]]

I would need an example of how to program this part (if it’s possible). I have tried different ways to do it and none of them work (I have even lost a lot of time with chatgpt without success).

Regards

4

You were already given a solution, no?

Surely it will fail since you are using something not described in docs.