Switch Template - icon not changing

Configuration
1

Hi all,

This post is not identical to the ’ Template switch icon do not change’

I can see the lock.ytterdor is changing from locked/unlocked in state, so why doesn’t the script below work inside configuration.yaml? Running 0.93.1

The created switch works as expected to lock/unlock the door, but the switch does not have an icon at all at the moment…

switch:
  platform: template
  switches:
    yale_lock:
      friendly_name: 'Inngangsdør'
      value_template: "{{ is_state('lock.ytterdor', 'locked') }}"
      turn_on:
        service: lock.lock
        data:
          entity_id: lock.ytterdor
          code: 'XXXXXX'
      turn_off:
        service: lock.unlock
        data:
          entity_id: lock.ytterdor
          code: 'XXXXXX'
      icon_template: >-
        {% if is_state('lock.ytterdor', 'locked') %}
          mdi:shield.lock
        {% else %}
          mdi:shield-open
        {% endif %}
2

mdi:shield-lock is the correct name.

It’s also possible that the Icon has not been built into home-assistant yet. The icon repository is only updated so-often.

3

@petro Uh, typo… But shield-open was not working neither from template.

If I set ‘icon: mdi:shield-lock’ below entity_id inside the card, it shows - does this mean it is built on or not?
How can I check if the icon is built in or not?

4

if it shows up in the interface, it’s built in. If it’s emtpy, it’s a typo or not built in yet.

5

@petro, It shows if I do:

  - type: custom:button-card
    type: entities
      title: YTTERDØR
      toggle: true
      show_header_toggle: false
      entities:
        - entity: switch.yale_lock
          icon: mdi:shield-lock

…but not if I set it through the switch template…? I’m lost…

6

And when you remove the line icon: mdi:shield-lock, it doesn’t show anything?

7

@petro The type caused it to not work.
Correcting to shield-lock made it work, but the shield-open does not exist.

So I tried to add images instead by setting following, but then there is no images shown…

  icon_template: >-
    {% if is_state('lock.ytterdor', 'locked') %}
      /local/icons/custom/green_shield.png
    {% else %}
      /local/icons/custom/red_shield.png
    {% endif %}
8

icon_template only accepts built in icons. If you use an image you need to use the entity_picture_template field.

9

@petro You’re amazing, thx!

Perhaps you have a solution for the final part; I’ve read lots of posts regarding changing colors as part of state. I don’t want to change the entity color, I want to change the background color of the card based on state. Optimally, I want to use the code:

     animation: blink 2s linear infinite
   extra_styles: >
     @keyframes blink {
       50% {
         background: red;
       }
     }

This I want to happen on state ‘unlocked’. Is this achievable without installing CustomUI ?

Using card-modder for this card:

 - type: custom:card-modder
   card:
     type: entities
     title: YTTERDØR
     toggle: false
     show_header_toggle: false
     entities:
       - entity: switch.yale_lock
   style:                 
     background-image: url("/local/cardbackK.png")
     background-repeat: no-repeat
     background-color: rgba(50,50,50,0.3)
     background-size: 100% 68px
     border-radius: 20px
     border: solid 1px rgba(100,100,100,0.3)
     box-shadow: 3px 3px rgba(0,0,0,0.4)
10

the attribute you are looking for is:

      --ha-card-background: 'rgba(50,50,50,0.3)'
      --ha-card-box-shadow: 'rgba(0,0,0,0.4)'

also i believe this would work too


      --paper-card-background-color: 'rgba(50,50,50,0.3)'
11

@petro But how can I change the background color of a card based on state without CustomUI ? Can I do this as a part of switch template ?

12

Yah, use those attributes in the card-modder. What I provided is 100% separate from CustomUI. I don’t use custom UI.

13

@petro May I kindly ask for an example how to change the card backround based on state of a switch or lock?

14

Ah sorry, I kept missing your statement about based on the state of a entity. You can do this without custom UI but it’s just as challenging. You need to add the templating card.