Add Template Sensor device_class support (#5220)

* Add Template Sensor device_class support

* Update battery templates

* Update track battery level example

source/_components/device_tracker.owntracks_http.markdown

@@ -47,17 +47,6 @@ sensor:
         friendly_name: Pixel of Paulus
         unit_of_measurement: "%"
         value_template: '{{ states.device_tracker.paulus_pixel.attributes.battery|int }}'
-        icon_template: >-
+        device_class: battery
-          {% set battery_level = states.device_tracker.paulus_pixel.attributes.battery|default(0)|int %}
-          {% set battery_round = (battery_level / 10) |int * 10 %}
-          {% if battery_round >= 100 %}
-            mdi:battery
-          {% elif battery_round > 0 %}
-            mdi:battery-{{ battery_round }}
-          {% else %}
-            mdi:battery-alert
-          {% endif %}
-        entity_id: 
-        - device_tracker.paulus_pixel
 ```
 {% endraw %}

source/_components/sensor.template.markdown

@@ -69,6 +69,11 @@ sensor:
         description: Defines a template for the entity picture of the sensor.
         required: false
         type: template
+      device_class:
+        description: The type/class of the sensor to set the icon in the frontend.
+        required: false
+        type: device_class
+        default: None
 {% endconfiguration %}
 
 ## {% linkable_title Considerations %}

source/_cookbook/track_battery_level.markdown

@@ -12,7 +12,7 @@ ha_category: Automation Examples
 
 ### {% linkable_title iOS Devices %}
 
-If you have a device running iOS (iPhone, iPad, etc), The [iCloud](/components/device_tracker.icloud/) is gathering various details about your device including the battery level. To display it in the Frontend use a [template sensor](/components/sensor.template/). You can also use the icon template option to create a dynamic icon that changes with the battery level.
+If you have a device running iOS (iPhone, iPad, etc), The [iCloud](/components/device_tracker.icloud/) is gathering various details about your device including the battery level. To display it in the Frontend use a [template sensor](/components/sensor.template/). You can also the `battery` [sensor device class](/components/sensor/#device-class) to dynamically change the icon with the battery level.
 
 {% raw %}
 ```yaml
@@ -21,8 +21,6 @@ sensor:
     sensors:
       battery_iphone:
         friendly_name: iPhone Battery
-        # "entity_id:" ensures that this sensor will only update when your device tracker does.
-        entity_id: device_tracker.iphone
         unit_of_measurement: '%'
         value_template: >-
             {%- if states.device_tracker.iphone.attributes.battery %}
@@ -30,21 +28,10 @@ sensor:
             {% else %}
                 {{ states.sensor.battery_iphone.state }}
             {%- endif %}
-        icon_template: >
+        device_class: battery
-            {% set battery_level = states.sensor.battery_iphone.state|default(0)|int %}
-            {% set battery_round = (battery_level / 10) |int * 10 %}
-            {% if battery_round >= 100 %}
-              mdi:battery
-            {% elif battery_round > 0 %}
-              mdi:battery-{{ battery_round }}
-            {% else %}
-              mdi:battery-alert
-            {% endif %}
 ```
 {% endraw %}
 
-The `else` part is used to have the sensor keep its last state if the newest [iCloud](/components/device_tracker.icloud/) update doesn't have any battery state in it (which happens sometimes). Otherwise the sensor will be blank.
-
 ### {% linkable_title Android and iOS Devices %}
 
 While running the [Owntracks](/components/device_tracker.owntracks/) device tracker you can retrieve the battery level with a MQTT sensor. Replace username with your MQTT username (for the embedded MQTT it's simply homeassistant), and deviceid with the set Device ID in Owntracks.
@@ -57,5 +44,6 @@ sensor:
     name: "Battery Tablet"
     unit_of_measurement: "%"
     value_template: '{{ value_json.batt }}'
+    device_class: battery
 ```
 {% endraw %}