Change entity icon based on state

Configuration Frontend
1

(I have read Changing mdi icon depending on sensor state which does this using a template sensor)

Some sensors (probably those coming from an integration which took care of it?) do this out of the box.

Is creating an own (new/additional) template sensor (or doing the math in the UI) the only way to change the icon of a sensor?

E. g. contact sensor of type (device_class “door”) automatically use
grafik for state OPEN and

grafik for state CLOSED

There’s no specific icon set manually (grafik).

Is it maybe possible to define these state based icons using customize.yaml?

1 Like
2

Where there’s a supported device class it’s done automatically - otherwise yes, you need a template sensor (or to handle it entirely in the frontend)

3

I was afraid of that answer :smiley:

I guess changing the default icon set for every device class would go to far (probably into Core settings).
For every other entity not having a device class assigned it’s a complete overkill to create an additional template sensor.

Real life use-case behind my question:

What about the year of streamlining (user interface) experiences:
do you think a feature request to be able to set state sensitive icons instead of static ones (at least for simple domains with binary states like binary_sensor or switch) in the UI would be successful?

4

I don’t know if it would be successful, as I can’t predict the future, but a feature request for the frontend to support different icons based on an entity’s state seems like it’d be popular (based off of a quick Google search anyway).

2 Likes
5

@Tinkerer I just flashed my HA Blue and reinstalled a fresh copy of HA. While trying to get everything back up and running I got to the part that included my customize.yaml file. So at first, I thought that it wasn’t working but now it seems like only the templates are not working.

For example, this IS working. The icon and the friendly_name change correctly.

light.kcl:
  icon: phu:bulb-group-ceiling-flush-circular
  friendly_name: Kitchen Lights

However, this is NOT working. Before I reinstalled HA I think it was still working fine. The icon and the icon_color changed based on the state of the 'input_boolean`. Did something change that affected this.?

input_boolean.mss_all:
  templates:
    icon: >
      if (state === 'on') return 'mdi:motion-sensor';
      return 'mdi:motion-sensor-off';
    icon_color: >
      if (state === 'on') return 'rgb(255, 255, 255)';
      return 'var(--disabled-text-color)';

EDIT: Disregard my question. I just realized that I was using the custom-ui integration and that was what was allowing me to do this. I forgot that templating is not a core part of customization… and actually, neither is icon-color.

6

Added this UI based feature request to an existing one with another approach (based on templating / doing it in YAML instead):

7

Hi, I want to change the badge icon in the mushroom template card these are the different things i tried, but no luck.

{% if (states['counter.lichten_aan'].state === '0') %}
   mdi:numeric-0
{% elif ('counter.lichten_aan' === '1' ) %}
   mdi:numeric-1
{% elif (counter.lichten_aan === '2') %}
  mdi:numeric-2
{% else %}
  mdi:numeric-3
{% endif %}
8

If you looking for YAML Code to the above then this is what im doing right now.

So I use Horizontal Stack Card then using custom mushroom template card, under Icon this is the code I use:

{% if is_state(‘binary_sensor.ep1_hallyway_d72850_pir’, ‘on’) %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}

Then to change the colour of the icon depending on state:

{% if is_state(‘binary_sensor.ep1_hallyway_d72850_pir’, ‘on’) %}
green
{% else %}
red
{% endif %}

Hope this helps.