Icon Templates

Warning: I’m new to HA! I just spun up HAOS on a spare computer and am trying to see how much of my NodeRed UI and NodeRed Alexa Integrations and I can replace with HA to make things easier in the long run.

Anyway, I decided to try and implement some MQTTT sensors. I found that I’m supposed to be able to use templates in icons to update them based on the values. As far as I can tell, I’ve done it correctly, yet the icons are not being rendered for me (migration guides said icon now replaces icon_template)! Any helps would be greatly appreciated!

Brief Explanation:
Battery – Get Battery Level (0-100) and display appropriate icon based on the level.
Timestamp – Show icon with alert when time is beyond 5 minutes.

#======================================================
# MQTT Integrations
#======================================================
mqtt:
    sensor:
        ...
        - name: "Basement Battery"
          unique_id: "basement_battery"
          state_topic: "home/goveelife/measurement/basement/battery"
          availability_topic: "home/goveelife/measurement/basement/state"
          availability_template: > 
            {% set raw_timestamp = value_json.timestamp %} 
            {% set last_updated = as_timestamp(raw_timestamp) %} 
            {% set current_time = as_timestamp(utcnow()) %} 
            {{ 'online' if (current_time - last_updated) < 300 else 'offline' }}
          unit_of_measurement: "%"
          icon: > 
            {% set floatValue = value | float %} 
            {% if floatValue >= 90 %} 
            mdi:battery-high 
            {% elif floatValue >= 80 %} 
            mdi:battery-80 
            {% elif floatValue >= 70 %} 
            mdi:battery-70 
            {% elif floatValue >= 60 %} 
            mdi:battery-60 
            {% elif floatValue >= 50 %} 
            mdi:battery-50 
            {% elif floatValue >= 40 %} 
            mdi:battery-40 
            {% elif floatValue >= 30 %} 
            mdi:battery-30 
            {% elif floatValue >= 20 %} 
            mdi:battery-20 
            {% elif floatValue >= 10 %}
            mdi:battery-10 
            {% else %} 
            mdi:battery-outline 
            {% endif %}
        - name: "Basement Update Timestamp"
          unique_id: "basement_update_timestamp"
          state_topic: "home/goveelife/measurement/basement/state"
          value_template: "{{ as_timestamp(value_json.timestamp) | timestamp_custom('%A, %I:%M:%S') }}"
          icon: > 
            {% set raw_timestamp = value_json.timestamp %} 
            {% set last_updated = as_timestamp(raw_timestamp) %} 
            {% set current_time = as_timestamp(utcnow()) %} 
            {{ 'mdi:clock' if (current_time - last_updated) < 300 else 'mdi:clock-alert' }}

Any other tips (ex: reduce duplicated code for availability template!) would be appreciated too!

No idea about mqtt, but for other sensors it is enough to set “device_class: battery” to get an automatically set battery icon.

I didn’t even realize there was a device class option! That greatly simplifies things – thank you!