Climate icon change

Hello,
I have just started working with climate and generic_thermostat and I wanted to know it it is possible to change climate entity icon based on whether the thermostat is heating or idle.

Are you displaying the thermostat using the default Frontend UI or with Lovelace? If it’s for the Frontend, I can explain how to do what you’re asking.

I am using Lovelace but Frontend UI would work too. I would be really happy if you did that!

I’m using Custom UI to create conditional icons, namely icons whose appearance, color, and visibility are based on an entity’s state.

You first need to install and configure Custom UI. The instructions can be found in its repository.

Here are two examples of conditional icons. The first one is for a sensor and the second one is for a thermostat.

Example 1: MQTT Sensor

  • Show green ‘thumbs-up’ when the security system is ready to be armed (“Yes”).
  • Show yellowish ‘thumbs-down’ when it’s not ready (“No”).

In sensors.yaml:

  - platform: mqtt
    name: "Security Status"
    state_topic: "premise/home/house/securitysystem/securityready"
    value_template:  >-
      {% set values = { '0':'No',  '1':'Yes' } %}
      {{ values[value] if value in values.keys() else 'No' }}

In customize.yaml:

sensor.security_status:
  templates:
    icon: >
      if (state === 'Yes') return 'mdi:thumb-up-outline';
      return 'mdi:thumb-down-outline';
    icon_color: >
      if (state === 'Yes')  return 'green';
      return '#FDD835';

Here’s what it looks like when the security system is ready/not ready to be armed.

There’s another feature I’m using and that’s conditional visibility. You’ll notice that “Laundry Lock” is visible when it is “Unlocked” but not when it’s “Locked”. I have all doors and locks configured this way. I only want to see them in the list if they require my attention, meaning if they are open or unlocked. If they are closed/locked then I don’t want them to appear in the list. Here’s how it’s done, using hidden:

In customize.yaml:

binary_sensor.laundry_door_lock:
  friendly_name: Laundry Lock
  templates:
    hidden: "return (state === 'off' );"

Example 2: MQTT Thermostat

  • Show red ‘flame’ when heating.
  • Show blue ‘snowflake’ when cooling.
  • Show black ‘snoring’ when idling (not heating or cooling).

The thermostat’s entry in configuration.yaml is quite long so I’ll skip showing it (let me know if you need to see it). The important thing is that its operating states are: heat, cool, and idle. This is different from most thermostats in Home Assistant that report their operating modes: heat, cool, auto, off. Simply adapt the following information to your thermostat:

In customize.yaml:

climate.thermostat:
  templates:
    icon: >
      if (state === 'heat') return 'mdi:fire';
      if (state === 'cool') return 'mdi:snowflake';
      if (state === 'idle') return 'mdi:sleep';
      return 'mdi:power-off';
    icon_color: >
      if (state === 'heat') return 'red';
      if (state === 'cool') return 'blue';
      if (state === 'idle') return 'black';

Here’s what it looks like when in idle state and in heat state:

Home%20Assistant%20-%20Climate%20-%20Demo

3 Likes

Thank you! It helped me really much!

Hi , try your solution but don´t work for me .Don´t know what i do wrong . Appreciate any help .

Your thermostat has only two operation modes: heat and off.

If you have Custom UI installed, then the following commands should work:

climate.termostato:
  templates:
    icon: >
      if (state === 'heat') return 'mdi:fire';
      return 'mdi:power-off';
    icon_color: >
      if (state === 'heat') return 'red';
      if (state === 'off') return 'black';

NOTE
Please be advised that the customize.yaml commands to control the icon’s color and appearance are not natively supported by Home Assistant’s Frontend. You must have Custom UI installed for this to work.

Thats it , works perfectly now .
Thanks !

Does this still work with the current HA? I’ve been trying to get something like this to display AC status in a Picture Elements Card.

I’ve added the Custom UI according to the manual installation steps but no luck so far.

Tip:

Avoid following instructions that are 4 years old.


Start a new topic and describe what you want to achieve.

I didn’t get my hopes up to much. :wink: But it would have been nice if this still worked