Icon color based on state

Configuration
42

you need to be precise. The template you use is a Jinja template, and is only supported in native components explicitly supporting that. Or in template sensors and automations. see the links on https://hvb.duckdns.org:8125/developer-tools/template

if so it uses the syntax:

icon_template: >
  {{etc}}

Custom-ui uses javascript templates (JS). This uses the syntax:

entity_id:
  templates:
    icon: >
      if (this) return 'that';

SO, not only are you using the wrong template (jinja instead of js) you are also mixing the syntaxes … :wink:

In order to use the JS icon template I provided above, you need to install custom-ui first and then save the template in a customize section in your config.

43

though the templates are fine (you can leave out both 'else’s) they shouldn’t be in customize.glob which is for global customizations. These templates are for an individual entity and should ideally be under

homeassistant:
  customize:
    switch.etang_interieur:

(note there’s no need to quote the entity_id)

44

But in configuration.yaml i have add this:

homeassistant:
  customize: !include customize.yaml

and i must add to customize.yaml…
If i use standard card i must use

icon_template: >
  {{etc}}

???

45

yes, thats fine, simply only add the entity and the template

not sure what you mean here, but no support for templating in standard Lovelace cards. You can use templating in the ‘backend’. Server-side. Where you create your sensors, automations, and define the config of integration etc etc.

Lovelace is a frontend thing. Browser-side

46

ok but still dont understand… Why i can not use template from custmize.yaml to my cover… Sorry… i am begginer.

47

because you can only do what is designed to be done. If it is not supported natively, than you can use custom-ui. And need to conform to the syntax and techniques it uses.

everything is explained in the docs I linked you to. It is of utmost relevance you should read that, and try to grasp what is explained there.

48

Ok but how i can verify that it is not supported for cover ?

49

By looking at the documentation.

50

Ok. I send feature request to add tis option…

51

It’s already on a template cover. Nothing to request. You can also do this with custom cards in lovelace.

Not to mention, looking at your past post, you can get the icons you want by customizing the device class as shutter.

customize:
  cover.blah:
    device_class: shutter
1 Like
52

BINGO and it is solution for me :slight_smile: Thanks Thanks Thanks :slight_smile:
Only end question. How setup class shutter globaly for all cover in my Home Assistan?

53

You can’t, need to configure each one.

1 Like
54

I used customize_glob.yaml because icon_color is not working in customize.yaml…
So I tested again the customization of the icon (and only the icon) in customize.yaml for a cover… After HA restarted, I have no icon in this following case…

cover.tentures_courcelles:
  templates:
    icon: >-
             {% if ((states.cover.tentures_courcelles.state) === 'open') %}
                 mdi:white-balance-sunny
             {% else %}
                 mdi:weather-night
             {% endif %}

I tried this, and I have the default icon for a cover…

cover.tentures_courcelles:
  icon_template: >-
             {% if ((states.cover.tentures_courcelles.state) === 'open') %}
                 mdi:white-balance-sunny
             {% else %}
                 mdi:weather-night
             {% endif %}
55

I had the same effect. But change class device is for me sollution.

56

Thanks very much

57

That’s jinja code, not js. Do not confuse the 2. If this is for custom_ui, you need to code in all js (no jinja).

58

It works for cover as well in case you need another solution (as I can see you found one, excellent !)

here is what I did to test:

"cover.tentures_courcelles":
  templates:
    icon: if (state === 'open') return 'mdi:power-plug'; else return 'mdi:power-plug-off';

When I restart I have the correct icon based on state…

59

sure, its what I posted above: Icon color based on state

note you can leave out ‘else’

also, you shouldn’t be needed to restart, simply click Configuration/Server controls, and then Reload location and customizations. Most of the time this takes care of things

60

Marius, how do you get the icons to be a different color than the default theme color? I have an entity card for lights (green theme) it shows the light is gray for off but on it shows as theme color green. I would love to do what you did with the different colors for the side bar as well as cards.

61

see https://github.com/Mariusthvdb/custom-ui :wink:

2 Likes