Custom icon in switch template won't show

Configuration
1

I try to add custom icon in switch template but won’t shwo.

My icon template:

icon_template: >-
  {% if is_state('media_player.bedroom_rpi3_kodi', 'playing') %}
    /config/icons/kodi-playing.svg
  {% elif is_state('binary_sensor.ping_bedroom_rpi3', 'off') and is_state('media_player.bedroom_rpi3_kodi', 'off') %}
    mdi:raspberrypi
  {% else %}
    mdi:kodi
  {% endif %}

When kodi playing no icon show i try with svg and png format.

Icons from mdi working ok.

2

Icons will only work if they come from the built in icon repository. If you want to use an image, you need to use the entity_picture_template.

3

I try, but not working?

entity_picture_template: >-
  {% if is_state('media_player.bedroom_rpi3_kodi', 'playing') %}
    /config/icons/kodi-playing.png
  {% elif is_state('binary_sensor.ping_bedroom_rpi3', 'off') and is_state('media_player.bedroom_rpi3_kodi', 'off') %}
    mdi:raspberrypi
  {% else %}
    mdi:kodi
  {% endif %}
4

You can’t use icons in the entity_picture_template. You can only use embedded icons in the icon_template, you can only use images in the entity_picture_template. You are trying to mix both, gotta go with one or the other. If you want, you can go to the icon website and download the icons you want as SVG files and use the entity_picture_template, but you have to call out the newly added SVG icons.

Your second issue is that you need to place all media in the www folder home assistant config.
Example path: config/www/icons/kodi-playing.png

Your yaml cannot call out that location. It has to call out local, which essentially equates to config\www:

local/icons/kodi-playing.png
5

Now icons are showing. Thanks.

I downloaded svg from mdi and customize it. But not show whole square (icon has circle shape)?

bad_icons

6

All sensors have a circular shape. It’s how home assistant displays sensors.

7

Can I use animated svg?

Thanks for help @petro.

8

I found this: https://community.home-assistant.io/t/animated-svg-icons/52615/3

And I use: https://shapeshifter.design/ to make animation svg files.

Then I put all svg files to folder /local/icons/kodi-playing/.

my template:

entity_picture_template: >-
  {% if is_state('media_player.bedroom_rpi3_kodi', 'playing') %}
    {% set path = "/local/icons/kodi-playing/" %}
    {% set ext = ".svg"%}
    {{[path,ext]|join("")}}
  {% elif is_state('binary_sensor.ping_bedroom_rpi3', 'off') and is_state('media_player.bedroom_rpi3_kodi', 'off') %}
    /local/icons/kodi-playing.svg
  {% else %}
    /local/icons/kodi-playing.svg
  {% endif %}

Not working there are no icon at all?

9

Good question. Maybe? Give it a whirl, it might not work though.

10

Have you tried using an icon from that link? It might just be the wrong SVG format. Unfortunately, that is out of my expertise.

11

I use several animated gifs as entity_picture so yes that is possible

12

Aren’t you missing the state in the first part of your template if? Only see path and extension…

13

Never mind I made svg animated files and put them in switch template like this:

entity_picture_template: >-
  {% if is_state('media_player.bedroom_rpi3_kodi', 'playing') %}
/local/icons/kodi-playing_250px.svg
  {% elif is_state('media_player.bedroom_rpi3_kodi', 'paused') %}
/local/icons/kodi-paused_250px.svg
  {% elif is_state('media_player.bedroom_rpi3_kodi', 'idle') %}
/local/icons/kodi-idle_250px.svg
  {% else %}
/local/icons/kodi-offline_250px.svg
  {% endif %}

Location of my animated svg-s for kodi if someone wan’t to use or customize them:
https://codepen.io/lpt2007/projects/public/

14

I take it you were looking for something like this:

entity_picture_template: >
  {% if states('media_player.bedroom_rpi3_kodi') in ['playing','paused','idle'] %} 
    {% set state = states('media_player.bedroom_rpi3_kodi') %}
    {% set path = "/local/icons/kodi-playing/" %}
    {% set ext = ".svg"%}
      {{[path,state,ext]|join("")}}
  {% else %} /local/icons/kodi-offline_250px.svg
  {% endif %}

in this case

entity_picture_template: >
  {% if states('media_player.bedroom_rpi3_kodi') in ['playing','paused','idle'] %} 
        {{ '/local/icons/kodi-playing/' ~ states('media_player.bedroom_rpi3_kodi') ~ '.svg'}}
  {% else %} /local/icons/kodi-offline_250px.svg
  {% endif %}

would be even cleaner …:wink:

15

Thanks. @Mariusthvdb.

I will try that :slight_smile: