Picture-entity: change mdi icons based on state, what is the working method?

[iAR]

I am trying to get my mdi icons to change color (or appear and disappear or change the icon itself) based on the state.

There is so much information on the forum here, but nothing seems to work.

This is what I have now…

type: picture-elements
elements:
  - type: icon
    icon: mdi:motion-sensor
    entity: binary_sensor.zolder_motion_trap_beweging
    style:
      top: 65%
      left: 16%
      border: 0px
    state_color: false
    card_mod:
      style: |
        ha-card {
          --state-binary_sensor-on-color': green;
          --state-binary_sensor-off-color': red;
image: /local/pictures/floor2.png

The icon stays black.

What is the right way to:

1. Change the color for a binary sensor?
2. Change the icon itself for a binary sensor?
3. Change the color for a light (preferably based on the color of the light itself)?
4. Change the color based on a numeric (of text) value?

[Ildar_Gabdullin]

@iAR

    card_mod:
      style: |
        ha-card {
          --state-binary_sensor-on-color': green;
          --state-binary_sensor-off-color': red;

This code has typos:

• extra “`” after variables;
• no closing “}”.

@iAR

Change the color for a binary sensor?

Use card-mod: either using css variables like you tried or by a direct access to CSS elements.

@iAR

Change the icon itself for a binary sensor?

1.For template sensors - you may define icons inside a template definition.
Docs

2. Alternatively (and for not-template sensors) - you may try using card-mod and “–card-mod-icon” variable.

@iAR

Change the color for a light (preferably based on the color of the light itself)?

Not tried myself - but probably by card-mod as well.

@iAR

Change the color based on a numeric (of text) value?

Alternatives:

1. Card-mod - to change a color on some particular card.
2. Custom UI (google it) - to change a color everywhere.

Go to the main card-mod thread for details.

Besides, for Picture-elements card it is possible to style colors STATICALLY by using its native “style” option. If you want to style colors dynamically - card-mod, see examples here.