Picture Elements Icon with template?

Configuration Frontend
1

I’m trying to change the icon based on a sensor status, but it doesn’t seem to work (no image). I tried to change it to State-Icon but the result is the same. Below is my code:

   elements:
      - type: icon
        entity: input_boolean.gamestream_connected
        icon: |-
          {% if states('input_boolean.gamestream_connected') == 'on' %}
              mdi:lan-check 
          {% else %}
              mdi:lan-disconnect 
          {% endif %}
        title: Gamestream Connection
2

Templates not supported.
Consider card-mod.
Discussion in a dedicated thread.

3

try:

    card_mod:
      style:
        ha-icon:
          $: |
            ha-svg-icon {
              color: red;
            }
        .: |
          ha-icon {
            --card-mod-icon: mdi:lan-{{'check' if is_state('input_boolean.gamestream_connected','on')
                                       else 'disconnect'}};
          }

(I’ ve added the color there, so you can see which elements are targeted, just in case).

If you dont need that, you can simply do:

    card_mod:
      style: |
        ha-icon {
          --card-mod-icon: mdi:home;
        }

(or use the template there)

for more go to the topic Ildar mentions above but forgot to link: 🔹 Card-mod - Add css styles to any lovelace card - #1867 by Ildar_Gabdullin

and there are a few more posts there on the picture-elements :wink:

1 Like