Is it possible to change header card icon based on entity state?

that points here…Is it possible to change header card icon based on entity state? - #2 by Ildar_Gabdullin

and no says nothing on icon size :wink:

o wait, maybe you mean this one 🔹 Card-mod - Add css styles to any lovelace card - #7204 by Ildar_Gabdullin

mm, nothing obvious there either. let me find that ha-state-icon

bingo:

  - type: heading
    heading: Ophaaldata
    heading_style: title
    card_mod:
      class: class-section-heading
      style:
        .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
            ha-state-icon {
              --mdc-icon-size: 38px;
            }
        .: |
          .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge {
            --card-mod-icon: {{states('sensor.volgende_afval_icon')}};
            --card-mod-icon-color: {{states('sensor.volgende_afval_kleur')}};
          }

Ive set it out of proportion, to show the option clearly. What’s nice is the rest of the header isnt blown up btw.

next up Ill FR the capitalization of those states, this looks really bad, and not like the second one, which is transformed correctly in the Frontend

1 Like