Picture-elements -> icon change to state

Configuration Frontend
1

Hello together, I wish you a Happy New Year 2026. I will update my dashbord and I struggle with the picture elements card.

In the card there is a cam view and some toggle for light. It would be nice if the icon change the color after state, for example:

light on → yellow
light off → grey

Question one:
Were should I use

 color: >
      {% if is_state('light.licht_kuche_tisch', 'on') %}
        yellow
      {% else %}
        grey
      {% endif %}

I don’t found the correct position, so that the card works.

Question two:
Can I also use a mushroom chips or another mushroom card inside of the pciture elements card?

Here my code so far.

type: horizontal-stack
cards:
  - type: picture-elements
    elements:
      - type: icon
        entity: switch.cam_kueche_ftp_upload
        icon: mdi:shield-lock
        style:
          bottom: 1%
          left: 8%
        tap_action:
          action: toggle
      - type: icon
        entity: light.licht_kuche_tisch
        icon: mdi:lightbulb
        style:
          bottom: 1%
          left: 20%
        tap_action:
          action: toggle
    camera_image: camera.cam_kueche_fliessend
    camera_view: live
  - type: picture-elements
    elements:
      - type: icon
        entity: switch.aussenbeleuchtung
        icon: mdi:lightbulb
        style:
          bottom: 1%
          left: 20%
        tap_action:
          action: toggle
    camera_image: camera.cam_werkstatt_fliessend
    camera_view: live
grid_options:
  columns: full
card_mod:
  style: |
    ha-card {
    background: #171717;
    border-color: #171717;
    border-radius: 18px;
    overflow: hidden;
    }

I search a lot at Google and here in the treads, but I haven’t found the solution until yet.

For your help many thanks in advance. Have a nice weekend and please stay healthy.

Ronny

P.S. I also tried Advance Camera Card. Here I struggeld too. :man_facepalming: To many configuration variables.

2

You cannot, templates are not supported in Picture elements card.
You got at least two options:

  • card-mod;
  • config-template-card.
  1. Use card-mod for that, particularly “–card-mod-icon” variable like this:
type: picture-elements
...
elements:
  - type: state-icon
    ...
    card_mod:
      style: |
        :host {
          --card-mod-icon: ...define jinja templates here...;
        }

Go to main card-mod thread - 1st post - fantastic link at the bottom - picture elements for basic examples.

  1. With a custom config-template-card (read Docs for this card):
type: picture-elements
...
elements:
  - type: custom:config-template-card
    entities: ...
    element:
      type: state-icon
      icon: >-
        ${  ...define JS template here...  }

Read docs for picture elements card, any CUSTOM card may be used as an element.

3

Hello @Ildar_Gabdullin ,

thank you very much for helping me. I will try me very best and let you know, whats work for me. :wink:

Have a great weekend.

Ronny

P.S. I choose Mushroom Chips Card as a custom card. Most of flexibliy in my case. :wink: Thanks again.

Ronny

1 Like
4

Good, keep in touch here! Best wishes.