Home Assistant Configuration

This example is based on the two battery entities provided by the HA App for Android.
The value is simply set to the battery level and the icon is computed based on if the phone is on charge or discharging and the battery level.

It also sets two attributes.

  • icon_color_value: the colour the icon should be
  • charge_status: the value from the phones battery_state.
- platform: template
sensors:
      janes_phone_status:
        friendly_name: Jane's Phone status
        value_template: >  
            {{states('sensor.moto_g_6_battery_level')}}
        icon_template: >
            {% set battery = states('sensor.moto_g_6_battery_level') %}
            {% set charging = states('sensor.moto_g_6_battery_state') %}
            {% set level = battery   | float | multiply(0.1) | round(0,"floor") | multiply(10)| round(0) %}
            {% if charging == 'charging' or charging == 'full' %}
            {% set s = "charging-" %}
            {% endif %}
            mdi:battery-{{s}}{{level}}
        attribute_templates:
          charge_status: >-
              {{states('sensor.moto_g_6_battery_state')}}
          icon_color_value: >-
              {% set battery = states('sensor.moto_g_6_battery_level') | float %}            
              {% if battery < 50 %}
              {% set color = "orange" %}
              {% elif battery < 20 %}
              {% set color = "red" %}
              {% else %} {% set color = "green" %}
              {% endif %}
              {{color}}

Using Card Mod

With card mod you can colour the icon based on the icon_color_value for example

type: entity
entity: sensor.janes_phone_status
card_mod:
  style: |
    ha-card {
      --state-icon-color: {{state_attr('sensor.janes_phone_status','icon_color_value')}}

Grid card With all device status

type: grid
cards:
  - type: entity
    entity: sensor.janes_phone_status
    name: Janes's Phone
    card_mod:
      style: |
        ha-card {
          --state-icon-color: {{state_attr('sensor.janes_phone_status','icon_color_value')}};
          }
  - type: entity
    entity: sensor.janes_tablet_status
    name: Jane's Tablet
    card_mod:
      style: |
        ha-card {
          --state-icon-color: {{state_attr('sensor.janes_tablet_status','icon_color_value')}};
          }
  - type: entity
    entity: sensor.stephens_phone_status
    name: Stephen's Phone
    card_mod:
      style: |
        ha-card {
          --state-icon-color: {{state_attr('sensor.janes_phone_status','icon_color_value')}};
          }
columns: 2
square: false