Icon color based on sensor state in Picture Elements

Can someone help me with icon color based on sensor state in picture-elements?

Here is my not working configuration:

type: picture-elements
style: |
  ha-card {
    --my-color-temp: {% if states('sensor.livingroom_sensor_temperature') < "20" %} green {% else %} red {% endif %};
  }
elements:
  - type: icon
    state_color: false
    icon: mdi:thermometer
    style:
      bottom: 0
      left: 0
      pointer-events: none
      transform: scale(0.8)
      '--paper-item-icon-color': var(--my-color-temp)
      line-height: 32px
      font-size: 11px
      font-family: var(--font-family)
image: /local/images/rooms/livingroom.png

I tryed with icon-state but not working:

type: picture-elements
style: |
  ha-card {
    --its-icon-color: red;
  }
elements:
  - type: state-icon
    state_color: false
    entity: sensor.livingroom_sensor_temperature
    icon: mdi:thermometer
    style:
      bottom: 0
      left: 0
      pointer-events: none
      transform: scale(0.8)
      '--paper-item-icon-color': var(--its-icon-color)
      line-height: 32px
      font-size: 11px
      font-family: var(--font-family)
image: /local/images/rooms/livingroom.png

I find a solution:)

type: picture-elements
elements:
  - type: state-icon
    entity: sensor.livingroom_sensor_temperature
    style:
      bottom: 0px
      left: 0px
      pointer-events: none
      transform: scale(0.8)
      line-height: 32px
      font-size: 11px
      font-family: var(--font-family)
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: {% set temp = states('sensor.livingroom_sensor_temperature') %}
                                   {% if   temp > '24' %}
                                   red
                                   {% elif temp < '22' %}
                                   green
                                   {% else %}
                                   blue
                                   {% endif %};
        }
2 Likes