Having troubles changing picture-element icon colors based on entity values

Configuration Frontend
1

After reading this post Picture Element and state icon change color I decided to try it out .

I’m trying to change the color of a humidity icon based on the entity value.
(humidity == fugtighed in danish)

I’ve removed alot from my picture element to make it more simple:

type: picture-elements
style: |
  ha-card {
    --garage_fugtighed_color: {% if states('sensor.garage_fugtighed') < "60" %} green {% else %} red {% endif %};
  }
elements:
  - type: state-icon
    entity: sensor.garage_fugtighed
    tap_action:
      action: more-info
    style:
      top: 79%
      left: 96%
      color: var(--garage_fugtighed_color)

image: 'https://myserver:8123/local/images/plantegning.png'

However this just gives me the following default blue icon…

image

Any suggestions? Or perhaps an easier way to change colors on picture elements?

2

Hello,
In picture element to use your defined colour, I don’t use color: keyword but --paper-item-icon-color
Hereafter my suggesstion
Thanks in advance for your feed back

type: picture-elements
style: |
  ha-card {
    --garage_fugtighed_color: {% if states('sensor.garage_fugtighed') < "60" %} green {% else %} red {% endif %};
  }
elements:
  - type: state-icon
    entity: sensor.garage_fugtighed
    tap_action:
      action: more-info
    style:
      top: 79%
      left: 96%
      '--paper-item-icon-color': var(--garage_fugtighed_color)

image: 'https://myserver:8123/local/images/plantegning.png'
3

Hi @jugla , I actually had --paper-item-icon-color in my own code and its still not working.

Even if I do like:

  ha-card {
    --garage_fugtighed_color: green;
  }

its still not working. its like ha-card is ignored completely

4

Please can you tell me if you have the following “Font-End” : card-mod
https://github.com/thomasloven/lovelace-card-mod
image

5

I have checked it - its installed and actually its working fine if I do something like:

type: button
card_mod:
  style: |
    ha-card {
      color: red;
    }
tap_action:
  action: toggle
entity: switch.sonoff_1001192ab1

image

6

I think this is working - Hope anyone can use the example and thanks for the help @jugla !

type: picture-elements
card_mod:
  style: |
    ha-card {
      --paper-item-icon-color: {% if states('sensor.garage_fugtighed') < "60" %} green {% else %} red {% endif %};
    }
elements:
  - type: state-icon
    entity: sensor.gang_fugtighed
    tap_action:
      action: more-info
    style:
      top: 79%
      left: 96%
image: 'https://myserver:8123/local/images/plantegning.png'