Icon change within custom button card

Configuration Frontend
1

Hello all,

Brand new to all things home assistant. I’ve got a few zigbee and tasmota devices, mqtt, node red and playing with grafana. But this is about lovelace. :slight_smile: There’s a LOT that I haven’t been able to grasp around yaml and its coding but i’m nto sure if thats my problem at the moment or its more of a misunderstanding of where I need to place things.

I found a post called “Fun with Custom:Button-card” and definitily like its capabilities. I’m currently trying to create a few cards that will display my sensors current battery state and change the icon based on power level. This is my whole card.

entity: sensor.front_door_power
type: custom:button-card
name: front door battery
icon: >
  {% if states('sensor.front_door_power') < 50 %) mdi:alert-decagram {% else %}
  mdi:battery {% endif %}

Lovelace is not telling me any of my formatting is wrong but I’m also not getting the expected result, a basic battery since the state of my front door sensor is currently 80%. I’m not getting an icon at all, but if I remove the code and just set the icon to mdi:battery it correctly shows the icon on the card.

Is my if statement not meant or able to go under the icon field? if so, where should I be doing that and how would I call it back to the card?

Thanks

2

Welcome huascar,

you are trying to use Jinja in custom:button card. Use the following instead:


icon: >
  [[[
    if (states['sensor.front_door_power'].state < 50) return 'mdi:alert-decagram';
    return 'mdi:battery';
  ]]]

Or shorter, because you have a „main“ entity (= sensor.front_door_power):


icon: >
  [[[
    if (entity.state < 50) return 'mdi:alert-decagram';
    return 'mdi:battery';
  ]]]

I can highly recommend the main discussion https://community.home-assistant.io/t/lovelace-button-card/65981

3

@pedolsky thank you so much. That did the trick. Can you either explain or recommend further reading for the code you used? You’re right, I did go the route of jinja but thats cause I saw some other similar styled yaml that used it. How do I determine what language to use?

and thank you for the link. I’ll be sure look at that too.

Thanks

4

Well, I think the quickest explanation is that the card uses Javascript, have a look here:

https://github.com/custom-cards/button-card#javascript-templates

5 
 entity: sensor.308_hybrid_charging_status
icon: phu:ev-notcharging
color: white
name: Charger Power
tap_action:
  action: toggle
  haptic: medium
hold_action:
  action: more-info
  haptic: medium
styles:
  img_cell:
    - padding-left: 50%
    - padding-right: 50%
    - justify-content: center
  card:
    - width: min(30vw, 130px)
    - height: min(30vw, 130px)
    - border-style: solid
    - border-width: 0px
    - border-color: white
    - border-radius: 20px
    - background: url("/local/images/blacka.jpg")
  icon:
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
  grid:
    - grid-template-areas: '"i" "n" "s"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  name:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - padding-left: 15px
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
  state:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - opacity: 0.8
    - padding: 0 15px 5px
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
state:
  - value: InProgress
    icon: phu:ev-charging
    styles:
      icon:
        - color: white
        - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(2,184,242.95)
      card:
        - background: url("/local/images/black.jpg")
        - border-style: solid
        - border-width: 2px
        - border-color: white
        - border-radius: 20px
        - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(255,255,255.95)
        - box-shadow: var(--soft-ui-pressed)
      name:
        - justify-self: start
        - font-weight: bold
        - font-size: 15px
        - padding-left: 15px
        - color: white
        - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(2,184,242.95)
      state:
        - justify-self: start
        - font-weight: bold
        - color: white
        - font-size: 15px
        - opacity: 0.6
        - padding: 0 15px 5px
        - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(2,184,242.95)
show_state: true
card_mod:
  class: soft-ui
type: custom:button-card

adjust how you want (important item is the state section at the bottom)