Phone Icon ONLY based on Charging State

Configuration
1

I am very new to HA and am largely looking at lovelace for the moment to get dashboards (very basic ones) in an attempt to teach myself how this all works.

All I want to figure out is if my phone (binary_sensor.phone_is_charging) is charging, display a charging icon, if my phone is not charging, display a discharging icon. No text, just an icon. I’ve played around with battery-entity-row from HACS but I cannot figure out how to omit the string to the right of the icon.

Entering:
name: ' '

Prints “Charging” or “Discharging” depending vs. blanking it out.

name: false

prints… you guessed it: false.

type: entities
entities:
  - type: custom:battery-entity-row
    entity: sensor.phone_battery_state
    unit: percent
    icon: mdi:battery-alert
    warning: 50
    critical: 25
    charging: true

Surely there’s a simple way to do this?

Thanks for your patience while I learn!

2

How about this?

type: button
entity: sensor.wg_s_pixel_4a_battery_level
name: WGPh
show_name: true
show_state: true
icon_height: 30px
style: |
  ha-card {
    --paper-item-icon-color:
        {% if is_state('sensor.wg_s_pixel_4a_battery_state','discharging') %}#aa1010
        {% else %}#277327
        {% endif %}
      ;
  }

image

It shows a green icon when it’s charging and a red one when it’s not.
The icon for the entity sensor.wg_s_pixel_4a_battery_level will show the battery level and you can remove the text below the icon by changing the respective ‘true’ to ‘false’.

3

That pretty much does what I want… except, for whatever reason, I am not seeing the color change. Is there a means to change the icon (ie. charging icon vs. not?)

Thank you so much!

4

It’s been working rather reliably and quickly in the past but I’ve had some issues in the last few days with a timely change of the icon color which seems to be due to the fact that e.g. the sensor in HA still shows ‘charging’ while the phone has just been unplugged and the same sensor in the phone app shows ‘discharging’ - haven’t had the time to investigate.

Another option is to look for these kind of discussions:
Search results for ‘change icon based on state’ - Home Assistant Community (home-assistant.io)

I think I had this set up and working once for a device but cannot find it any more - and I assume it still wouldn’t work if the sync between the phone detecting a state and the UI displaying it doesn’t work.

P.S.:
The status change is still pretty much instant for my tablet but it’s delayed for my phone by 10-15 seconds right now, still not sure why :confused: