Difficulty customizing icons with new 117 templates

Configuration
1

I’m fairly new to home assistant and am trying to get some basic customization of an entity icon. I am trying to get the icon to toggle between “mdi:door” and “mdi:door-open” based on the sensor state. The sensor is zwave and I set it up via the UI, so the actual config is buried in home-assistant’s self-made db somewhere.

The relevant (I think) config files are:

configuration.yaml:

# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:

# Uncomment this if you are using SSL/TLS, running in Docker container, etc.
# http:
#   base_url: example.duckdns.org:8123

# Text to speech
tts:
  - platform: google_translate

group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

# everything above here I believe came out of the box with the homeassistant install
homeassistant:
  legacy_templates: false
  customize: !include customize.yaml

customize.yaml:

# imported in configuration.yaml under 'homeassistant->customize'
binary_sensor.ecolink_door_window_sensor_sensor_3:
  templates:
    icon: >
      if (state === 'on') return 'mdi:door-open';
      return 'mdi:door';

I suspect there is something obvious I am missing. Any help would be appreciated.

2 
binary_sensor.ecolink_door_window_sensor_sensor_3:
  templates:
    icon: if (state === 'on') return 'mdi:door-open'; return 'mdi:door';
3

I converted it to the 1 liner and it seems a little better, the template gets recognized in the homeassistant frontend:

image
image417×689 28 KB

But the icons still don’t render in the entities view or on Lovelace dashboards.

4

where did you get the code for the customization? that looks like a custom component configuration.

If you don’t have the custom component configured that tyle of templating won’t work. It has to be in yaml.

5

That should work if you have CustomUI installed.

6

I took a different approach by changing the lovelace dashboard config and using state_filter on badges, rather than trying to customize the entity itself, it works without installing any UI extensions:

views:
  - badges:
      - type: entity-filter
        state_filter:
          - 'off'
        entities:
          - entity: binary_sensor.ecolink_door_window_sensor_sensor
            icon: 'mdi:door-closed'
      - type: entity-filter
        state_filter:
          - 'on'
        entities:
          - entity: binary_sensor.ecolink_door_window_sensor_sensor
            icon: 'mdi:door-closed'

Feels a bit hacky but gets the job done

7

Check here for the CustomUI:

You can custom all your icons, etc… :smiley:

Add URL as a custom repository to install it via HACS

8

Decided to take the plunge on Custom UI and get rid of my hacky solution. It worked great! The only stumbling block I had is that I didn’t immediately understand that /root/config/www in the homeassistant containers is where files need to go to be seen at /local by the web frontend.

Thanks again for the help

1 Like