Bubble Card Icons not displaying state icons

Configuration Frontend
1

Hi there
I have tried many options to change the bubble-card icons based on my sensor state. The sensor state shows correctly, but bubble-card only uses the “eye” default icon. Any help would be appreciated.
Thank you

  - type: custom:bubble-card
    card_type: button
    button_type: state
    sub_button:
      main: []
      bottom: []
    entity: sensor.bathroom_drawer_lock_status
    show_icon: true
    card_mod:
      style: |
        .bubble-icon {
          ${icon.setAttribute("icon", hass.states['sensor.bathroom_drawer_lock_status'].state | lower === 'locked' ? 'mdi:lock' : 'mdi:lock-open')}
        }    
    show_name: false
    show_last_changed: false
    show_last_updated: false
    show_attribute: true
    scrolling_effect: false
    button_action: {}
2

Try this…

type: custom:bubble-card
card_type: button
button_type: state
sub_button:
  main: []
  bottom: []
entity: sensor.bathroom_drawer_lock_status
show_icon: true
styles: >-
  .bubble-icon {
    ${icon.setAttribute("icon", state?.toLowerCase() === 'locked'
      ? 'mdi:lock'
      : 'mdi:lock-open'
    )}
show_name: false
show_last_changed: false
show_last_updated: false
show_attribute: true
scrolling_effect: false
button_action: {}
1 Like
3

The following option also works and aligns more with what the card docs suggest you use…

styles: >
  ${icon.setAttribute("icon", hass.states['sensor.bathroom_drawer_lock_status'].state?.toLowerCase() === 'locked'
      ? 'mdi:lock'
      : 'mdi:lock-open'
  )}

You can find an example under “Changing an icon or sub-button icon conditionally” towards the end of the bubble-card GitHub page.

1 Like
4

Thank you almighty59!
It works perfectly! Appreciate it!

1 Like