Separate icon for On/Off state MQTT sensor

I am trying to get hot water running icon and 1 for the off state.
After tinkering around i read and found out that state_icons is not allowed in mqtt and i would have to use a customize for that.

Now in my sensors yaml file i have this:

- platform: mqtt
  name: "Hot_Water"
  state_topic: "opentherm-thermostat/cv-dhw-active/get"
  value_template: "{{ value }}"

And in my customize.yaml this:

sensor.Hot_Water:
  state_icons:
    "off": "mdi:water-pump-off"
    "on": "mdi:water-pump"
  friendly_name: "Hot Water"

The customize.yaml is loaded in my configuration file.

#Homeassistant
homeassistant:
  customize: !include customize.yaml

Bit stumped now as it now just shows an eye in the entity card

Where in the Customization documentation did you find a description for an option called state_icons?

All it has is an option called icon for specifying a single icon.

Same as for Customization, it is for a single icon.

Icons do work yes and used them before. But i want an icon depandant on the state.
When i use state_icons it warns me its not allowed in the editor.

Why do believe state_icons is a valid option?

Not really sure if this is the best way to do it, but you can try creating template sensor based on sensor.hot_water-

According to the documentation, it supports icon template.


Edit: removing my previous post as it is an incorrect suggestion.

If you want to extend the capabilities of Customization, such as allowing the use of templates to determine the icon, consider using custom-ui:

In addition to templating the icon for any entity, it also lets you template the icon’s color.

Using custom-ui, your templated icon would look something like this:

    binary_sensor.hot_water:
      templates:
        icon: >
          if (state == 'on') return 'mdi:water-pump';
          if (state == 'off') return 'mdi:water-pump-off';
1 Like

After delving deeper into this. The custom-ui seems the best option for me now.
Trying to wrap my head around HA and i get stumped by stuff like this. It will come in time.
Ty for your help (@ardysusilo too)

Where did you read it?

I misread. Seems the topic was about the custom-ui. Learning all the time…

Be advised that if you are reading about the original Custom UI, it is no longer supported in Home Assistant.

Mariusthvdb created a modified version that supports a subset of the many features found in the original version. Any posts that are dated prior to 2020 are probably referring to the original version and may be misleading given that the original no longer works.

Let us know if the suggestion to use custom-ui works for you.

And even if what you were trying to do thru customization was possible then what you were using wouldn’t have worked anyway.

all entity_id’s are in lower case.

you had this:

sensor.Hot_Water:
....

which is not correct.

it should have been this:

sensor.hot_water:
...

just for future reference…

@finity
corrected that yes. That was down to my own habit of capitalizing.

@123
Couldnt get it to work at first, but after looking at the js in VS i noticed a few small indentation errors.
After fixing those it loaded in and now it works:

cvstatus