Using a Template to Change a Sensor’s Icon in Home Assistant

Photo by Harpal Singh on Unsplash

We are visual creatures — and in the context of Home Automation that oft means graphs, graphics, layouts and… icons. These become magical when they change based on inputs, whether that is the weather, the state of a hallway light state or the comparison of values. Today we’re going to use the Template platform in Home Assistant to change its icon whether an Electric Vehicle is charging or not.

Getting Started

I have an Electric Vehicle (EV) — it’s entry level, and 7 years old but it’s great. Every day I charge it at home via a L2 charger. I have a Shelly EM monitoring the Power (Watts) of the charging supply, so I know when it’s being charged. I already defined a Binary sensor to say whether the charging activity is on or off, but we’ll use a Template sensor to make it fancy. Instead of an EV, your source could be the state of a light or a door sensor — you just need to know the typical state values of your input sensor.

The Template platform structure has two key parts:

1. The value_template, where you define the states of the sensor based on inputs
2. The icon_template, where you change the type of icon, based on defined inputs.

Note that the input for the icon_template can be recursive, where the input is the state of the value_template for your new variable.

Making It Work

It’s worth spending time deciding what icons you are going to use upfront; and the MDI Cheatsheet is a great resource. For me, I want two icons — one for Charging and one for Ready To Drive (i.e. Fully Charged), and I’ve gone for mdi:lightning-bolt and mdi:car-electric for these states.

Note that MDI Cheatsheet uses the structure of mdi-icon-name, which needs to be changed to mdi:icon-name in Home Assistant.

First, using the Template structure, give your new sensor a name and description; I’ve gone for ev_state. Next is the value_template — which is a key section. Here I’ve used the two states of sensor.ev_charging_state as such:

1. sensor.ev_charging_state = on → state =Charging
2. sensor.ev_charging_state = off → state = Ready To Drive

And finally, is the icon_template. As mentioned above, I could take the recursive approach and use the value of ev_state, but to keep it simple, I’ve replicate the approach for the value_template:

1. sensor.ev_charging_state = on → icon=mdi:lightning-bolt (Charging)
2. sensor.ev_charging_state = off → icon= mdi:car-electric

And this is what it looks like in YAML:

Related Links & Topics

Setting a Light Scene for watching Netflix with Home Assistant

Material Design Icons

Configuring an Internet Speed Test sensor in Home Assistant