Adjust color of state icon

[ipod86]

Hello,

I despair of adjusting the color of a “state icon” in a “picture_elements” map.

type: picture-elements
elements:
  - type: state-icon
    entity: input_boolean.VIS_Mobbie_Fehlermeldung_Basis_bool
    icon: mdi:garage
    tap_action:
      action: navigate
      navigation_path: /lovelace/roborock_reset
    style:
      top: 4%
      left: 5%
      '--mdc-icon-size': 30px
      '--paper-item-icon-color': white
      '--paper-item-icon-active-color': red

This is what it currently looks like. Lines 13 and 14 have no effect.

Where did I get the error?

[Sirs0ri (Maxi)]

the two CSS variables you need to overwrite are --state-input_boolean-on-color and --state-input_boolean-off-color, so your example would look like this:

type: picture-elements
elements:
  - type: state-icon
    entity: input_boolean.VIS_Mobbie_Fehlermeldung_Basis_bool
    icon: mdi:garage
    tap_action:
      action: navigate
      navigation_path: /lovelace/roborock_reset
    style:
      top: 4%
      left: 5%
      '--mdc-icon-size': 30px
      '--state-input_boolean-off-color': white
      '--state-input_boolean-on-color': red

This’ll work for an input_boolean, other types of entities will require slight adjustments to set e.g. --state-light-on-color.

You can find which variables to set by opening your browser’s devtools then activating the “select” mode (Ctrl+Shift+C in Chrome or Firefox), and clicking on the icon in your picture elements card.

The inspector view will jump to the the HTML code of the icon (probably called ha-svg-icon), then look for its parent called ha-state-icon, marked red here:

That HTML element should have an inline style attribute defining a value for color, composed of a set of CSS variables, if you set one of them it’ll use that value instead of the default colors.

Hope this helps!

[ipod86]

Thank you very much, everything matches the color now. Hopefully next time I’ll find out for myself using your method. Thank you