Documentation additions (#3654)

source/_components/cover.template.markdown

@@ -251,3 +251,69 @@ automation:
           position: 25
 ```
 {% endraw %}
+
+### {% linkable_title Change The Icon %}
+
+This example shows how to change the icon based on the cover state.
+
+{% raw %}
+```yaml
+cover:
+  - platform: template
+    covers:
+      cover_group:
+        friendly_name: "Cover Group"
+        open_cover:
+          service: script.cover_group
+          data:
+            modus: 'open'
+        close_cover:
+          service: script.cover_group
+          data:
+            modus: 'close'
+        stop_cover:
+          service: script.cover_group
+          data:
+            modus: 'stop'
+        value_template: "{{is_state('sensor.cover_group', 'open')}}"
+        icon_template: >-
+          {% if is_state('sensor.cover_group', 'open') %}
+            mdi:window-open
+          {% else %}
+            mdi:window-closed
+          {% endif %}
+```
+{% endraw %}
+
+### {% linkable_title Change The Entity Picture %}
+
+This example shows how to change the entity picture based on the cover state.
+
+{% raw %}
+```yaml
+cover:
+  - platform: template
+    covers:
+      cover_group:
+        friendly_name: "Cover Group"
+        open_cover:
+          service: script.cover_group
+          data:
+            modus: 'open'
+        close_cover:
+          service: script.cover_group
+          data:
+            modus: 'close'
+        stop_cover:
+          service: script.cover_group
+          data:
+            modus: 'stop'
+        value_template: "{{is_state('sensor.cover_group', 'open')}}"
+        icon_template: >-
+          {% if is_state('sensor.cover_group', 'open') %}
+            /local/cover-open.png
+          {% else %}
+            /local/cover-closed.png
+          {% endif %}
+```
+{% endraw %}

source/_components/light.template.markdown

@@ -143,3 +143,91 @@ light:
           {% endif %}
 ```
 {% endraw %}
+
+### {% linkable_title Change The Icon %}
+
+This example shows how to change the icon based on the light state.
+
+{% raw %}
+```yaml
+light:
+  - platform: template
+    lights:
+      theater_volume:
+        friendly_name: "Receiver Volume"
+        value_template: >-
+          {% if is_state('media_player.receiver', 'on') %}
+            {% if states.media_player.receiver.attributes.is_volume_muted %}
+              off
+            {% else %}
+              on
+            {% endif %}
+          {% else %}
+            off
+          {% endif %}
+        icon_template: >-
+          {% if is_state('media_player.receiver', 'on') %}
+            {% if states.media_player.receiver.attributes.is_volume_muted %}
+              mdi:lightbulb-off
+            {% else %}
+              mdi:lightbulb-on
+            {% endif %}
+          {% else %}
+            mdi:lightbulb-off
+          {% endif %}
+        turn_on:
+          service: media_player.volume_mute
+          data:
+            entity_id: media_player.receiver
+            is_volume_muted: false
+        turn_off:
+          service: media_player.volume_mute
+          data:
+            entity_id: media_player.receiver
+            is_volume_muted: true
+```
+{% endraw %}
+
+### {% linkable_title Change The Entity Picture %}
+
+This example shows how to change the entity picture based on the light state.
+
+{% raw %}
+```yaml
+light:
+  - platform: template
+    lights:
+      theater_volume:
+        friendly_name: "Receiver Volume"
+        value_template: >-
+          {% if is_state('media_player.receiver', 'on') %}
+            {% if states.media_player.receiver.attributes.is_volume_muted %}
+              off
+            {% else %}
+              on
+            {% endif %}
+          {% else %}
+            off
+          {% endif %}
+        icon_template: >-
+          {% if is_state('media_player.receiver', 'on') %}
+            {% if states.media_player.receiver.attributes.is_volume_muted %}
+              /local/lightbulb-off.png
+            {% else %}
+              /local/lightbulb-on.png
+            {% endif %}
+          {% else %}
+            /local/lightbulb-off.png
+          {% endif %}
+        turn_on:
+          service: media_player.volume_mute
+          data:
+            entity_id: media_player.receiver
+            is_volume_muted: false
+        turn_off:
+          service: media_player.volume_mute
+          data:
+            entity_id: media_player.receiver
+            is_volume_muted: true
+```
+{% endraw %}

source/_components/sensor.template.markdown

@@ -61,6 +61,10 @@ sensor:
         description: Defines a template for the icon of the sensor.
         required: false
         type: template
+      icon_template:
+        description: Defines a template for the entity picture of the sensor.
+        required: false
+        type: template
 {% endconfiguration %}
 
 ## {% linkable_title Considerations %}
@@ -215,3 +219,29 @@ sensor:
           {% endif %}
 ```
 {% endraw %}
+
+### {% linkable_title Change The Entity Picture %}
+
+This example shows how to change the entity picture based on the day/night cycle.
+
+{% raw %}
+```yaml
+sensor:
+  - platform: template
+    sensors:
+      day_night:
+        friendly_name: "Day/Night"
+        value_template: >-
+          {% if is_state('sun.sun', 'above_horizon') %}
+            Day
+          {% else %}
+            Night
+          {% endif %}
+        entity_picture_template: >-
+          {% if is_state('sun.sun', 'above_horizon') %}
+            /local/daytime.png
+          {% else %}
+            /local/nighttime.png
+          {% endif %}
+```
+{% endraw %}

source/_components/switch.template.markdown

@@ -186,3 +186,31 @@ switch:
           {% endif %}
 ```
 {% endraw %}
+
+### {% linkable_title Change The Entity Picture %}
+
+This example shows how to change the entity picture based on the day/night cycle.
+
+{% raw %}
+```yaml
+switch:
+  - platform: template
+    switches:
+      garage:
+        value_template: "{{ is_state('cover.garage_door', 'on') }}"
+        turn_on:
+          service: cover.open_cover
+          data:
+            entity_id: cover.garage_door
+        turn_off:
+          service: cover.close_cover
+          data:
+            entity_id: cover.garage_door
+        entity_picture_template: >-
+          {% if is_state('cover.garage_door', 'open') %}
+            /local/garage-open.png
+          {% else %}
+            /local/garage-closed.png
+          {% endif %}
+```
+{% endraw %}