Sub Button Icon State Color

[StaleLoafOfBread]

Today we can color the background when the entity is considered on. This makes it a gold/yellow (at least on my theme). I am suggesting a feature where instead it will:

1. color the icon itself, not the background
2. make the color match var(--state-icon-color) for that sub buttons entity

For my purposes, a singular toggle for Use state color for icon would be perfect.

I have tried to accomplish this via style to color my phone battery icon but instead it's coloring based on the main person entity. I am not well versed in CSS nor JS so it's perhaps possible this way and I just do not yet know it.

type: custom:bubble-card
card_type: button
button_type: state
show_attribute: false
sub_button:
  - entity: sensor.phone_battery_level
    show_background: false
    show_attribute: false
    show_state: true
show_state: false
styles: |-

  .bubble-sub-button-1 {
      color: var(--state-icon-color) !important;
  }
entity: person.me

This is effectively the State color feature of the headings card under appearance for it's entities.

type: heading
icon: ""
heading_style: title
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.phone_battery_level
    color: state

Now that I'm comparing the two, I think copying the appearance functionality in whole would be awesome as that adds icon customization and the ability to show multiple attributes, including the state.

[MrBearPresident]

Paste following in your custom style:

  :host{
      --color-ok-icon: green ;
      --color-warning-icon: orange ;
      --color-alert-icon: red ;
  }

  .bubble-sub-button-01 ha-icon {
    color: var(${ hass.states['sensor.phone_battery_level'].state > 40 ? '--color-ok-icon':
                  hass.states['sensor.phone_battery_level'].state> 20 ? '--color-warning-icon' :
                              '--color-alert-icon'}) 
              !important; }

---

If this solves your question, mark it as solved and close the discussion.

[StaleLoafOfBread]

This is a great workaround and I'll definitely give it a shot once I'm home! Does this mean the built-in --state-icon-color is not currently possible for sub buttons?

[StaleLoafOfBread]

That workaround works! (Well I modified it a little but you did all the hard work!)

:host{
    --color-ok-icon: green ;
    --color-warning-icon: orange ;
    --color-alert-icon: red ;
}

.bubble-sub-button-1 {
  color: var(${ hass.states['sensor.phone_battery_level'].state > 70 ? '--color-ok-icon':
                hass.states['sensor.phone_battery_level'].state > 20 ? '--color-warning-icon' :
                            '--color-alert-icon'}) 
            !important; }

Though I would prefer if I could just use the --state-icon-color built into home assistant. My CSS skills and custom lovelace are severely lacking though so I have no idea if its currently possible.