Change battery icon in custom button card

[Lode1 (Lode Bongaerts)]

I have this custom button card and want to change the battery icon color and icon itself based on its batterylevel but i can’t find it. I have been looking around for hours and came this far.
I’m already happy with the card but i would love to have the ability to change the icon’s color and even when possible the icon itself.

type: custom:button-card
entity: binary_sensor.lenovo_tab_m10_plus_3rd_gen_plugged_in
name: Tablet
custom_fields:
  Batterij: |
    [[[ 
     return `<span>Batterij: <span style="color: var(--text-color-sensor);">${states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state}%</span></span>`
    ]]]
  Watt: |
    [[[
      return `<span>Vermogen: <span style="color: var(--text-color-sensor);">${states['sensor.902_power'].state}W</span></span>`
    ]]]
styles:
  grid:
    - grid-template-areas: '"i n" "i Batterij" "i Watt"'
    - grid-template-columns: 0.5fr 1fr
    - grid-template-rows: 1fr min-content min-content
  name:
    - align-self: start
    - padding-top: 5px
    - padding-bottom: 10px
    - padding-left: 0px
    - justify-self: left
  icon: |-
    if (states['sensor.lenovo_tab_m10_plus_3rd_gen_batter'].state < 95) {
         icon = "mdi:battery-50";
         color = "yellow" }
  custom_fields:
    Batterij:
      - padding-bottom: 10px
      - padding-top: 5px
      - align-self: start
      - font-size: 17px
      - justify-self: start
      - color: white
    Watt:
      - padding-bottom: 10px
      - padding-top: 0px
      - align-self: start
      - font-size: 17px
      - justify-self: start
      - color: white
view_layout:
  grid-area: a4

[armedad]

this came up in another question recently. didn’t have a great final answer but a workaround:

Can someone help/explain button animation

I have this yaml configuration for a button-card and I would like that my MDI:motion-sensor icon(5) can change to MDI: motion-sensor-off when there is no motion detected I tried a few options but couldn’t get it working type: custom:button-card aspect_ratio: 1/1 styles: custom_fields: icon1: - position: absolute - bottom: 5% - left: 5% - height: 20% - width: 20% - color: | [[[ return states['switch.my-switch'].state === 'on' ? '#ff…

[LiQuid_cOOled]

Definitely doable!

type: custom:button-card
entity: switch.kitchen_lights
name: Tablet
icon: |
  [[[ return states['switch.kitchen_lights'].state === 'on' ? 'mdi:battery' : 'mdi:battery-off';
           ]]]
styles:
  icon:
   - color: |
      [[[ return states['switch.kitchen_lights'].state === 'on' ? 'red' : 'green';
           ]]]

[armedad]

ah, the other thread is for the little overlays. i couldn’t find a clean way to make the overlay icons change.

[Lode1 (Lode Bongaerts)]

Thx for your reply.
Strange thing happened.
I had it working and suddenly it stopped working.
How is that possible ?
I got all the icons like i programmed it in yaml.
Now i get only this icon.

This is the code that worked 5 minutes ago.
The only thing i noticed is that where i placed value = ‘on’ suddenly icon: >- changes in icon: |- and i can’t change it anymore.
What is going on ?

type: custom:button-card
entity: binary_sensor.lenovo_tab_m10_plus_3rd_gen_plugged_in
name: Tablet
custom_fields:
  Batterij: |
    [[[ 
     return `<span>Batterij: <span style="color: var(--text-color-sensor);">${states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state}%</span></span>`
    ]]]
  Watt: |
    [[[
      return `<span>Vermogen: <span style="color: var(--text-color-sensor);">${states['sensor.902_power'].state}W</span></span>`
    ]]]
icon: mdi:battery-charging
styles:
  grid:
    - grid-template-areas: '"i n" "i Batterij" "i Watt"'
    - grid-template-columns: 0.5fr 1fr
    - grid-template-rows: 1fr min-content min-content
  name:
    - align-self: start
    - padding-top: 5px
    - padding-bottom: 10px
    - padding-left: 0px
    - justify-self: left
    - font-size: 25px
  icon:
    - width: 50px
    - height: 50px
    - transform: scale(0.9)
    - padding-left: 0px
  custom_fields:
    Batterij:
      - padding-bottom: 10px
      - padding-top: 5px
      - padding-left: 0px
      - align-self: start
      - font-size: 17px
      - justify-self: start
      - color: white
    Watt:
      - padding-bottom: 10px
      - padding-top: 0px
      - padding-left: 0px
      - align-self: start
      - font-size: 17px
      - justify-self: start
      - color: white
state:
  - value: 'off'
    icon: >-
      [[[ if (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state >= 60)
      return 'mdi:battery-60'; 
          if (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state <= 40) return 'mdi:battery-40';
          if (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state <= 10) return 'mdi:battery-10';
          
      ]]]
    styles:
      icon:
        - color: >-
            [[[   if (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state
            >= 60) return 'green';  if
            (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state <= 40)
            return 'yellow';  if
            (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state <= 10) 
            return 'red'; ]]]  
  - value: 'on'
    icon: |-
      [[[
         if (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state >= 60) return 'mdi:battery-charging-60'; 
         if (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state <= 40) return 'mdi:battery-charging-40';
         if (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state <= 10) return 'mdi:battery-charging-10';
      ]]]
    styles:
      icon:
        - color: >-
            [[[   if (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state
            >= 60) return 'green'; if
            (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state <= 40)
            return 'yellow'; if
            (states['sensor.lenovo_tab_m10_plus_3rd_gen_battery'].state <= 10)
            return 'red';  ]]]  
view_layout:
  grid-area: a4

[Lode1 (Lode Bongaerts)]

It’s getting worse…
I didn’t do anything ???

Can somebody please help ??

[armedad]

i put your code above in my dashboard replacing only the entities and it works for me…

[LiQuid_cOOled]

Code worked for me too! Let @armedad or myself know if you need further assistance.

[Lode1 (Lode Bongaerts)]

Thx guys.
I don’t know what happened but I went back to my last backup.
Then I pasted the code again and now it works.
Can you tell me what caused this strange behavior ? Not easy I guess
I had the code also in my test dashboard but i don’t think that can be an issue.

[LiQuid_cOOled]

I would worry about it unless it happens again.