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

SeRiusRod · November 20, 2024, 1:06pm

So far I’ve managed to change the icon color with cardmod, but I would want to change the icon to mdi:transmission-tower-off when the grid is offline.

type: heading
icon: mdi:transmission-tower
heading: RED
heading_style: title
card_mod:
  style: |
    .content ha-icon {
      color: 
        {% set s = states('binary_sensor.energy_acsources_grid_active') %}
        {% if (s == 'off') %} red
        {% endif %}
    }

So far I’ve tried iterations of the following without success.

icon: >
  {% if states['binary_sensor.energy_acsources_grid_active'].state === 'on' %}
    mdi:transmission-tower
  {% else %}
    mdi:transmission-tower-off
  {% endif %}

Is there a way?

Ildar_Gabdullin · November 20, 2024, 1:25pm

Try this:

    type: heading
    icon: mdi:fan
    heading: xxx
    badges:
      - type: entity
        entity: sun.sun
      - type: entity
        entity: zone.home
    card_mod:
      style: |
        .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge {
          --card-mod-icon: mdi:human;
        }
        .badges hui-heading-badge:nth-child(2) hui-entity-heading-badge {
          --card-mod-icon: mdi:account;
        }
        .title ha-icon {
          --card-mod-icon: mdi:car;
        }

Just add jinja templates to do it conditionally.

Ildar_Gabdullin · November 20, 2024, 1:29pm

This does not work since the Heading card does not support templates.

SeRiusRod · November 27, 2024, 1:16pm

That worked. Thank you very much @Ildar_Gabdullin

Mariusthvdb · January 8, 2025, 5:28pm

did we already find the correct element to set the size of those badge icons in the header?

is way too small… maybe we have a theme variable for that, need to check.

Also, I want to capitalize the state of that badge, but dint think we can do that either… hmm

  - 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 {
          --card-mod-icon: {{states('sensor.volgende_afval_icon')}};
          --card-mod-icon-color: {{states('sensor.volgende_afval_kleur')}};
        }
    tap_action:
      action: navigate
      navigation_path: /calendar
    badges:
      - type: entity
        show_state: true
        show_icon: true
        entity: sensor.afvalwijzer_next_type
      - type: entity
        show_state: true
        show_icon: false
        entity: sensor.afvalwijzer_next_date

I did test to add:

          --mdc-icon-size: 24px;

to that badge card_mod, but not targetted it correctly yet

this is what I need:

set on the :host:

Ildar_Gabdullin · January 8, 2025, 7:43pm

Wasn’t it already covered in my post for Heading in card-mod thread?
At least for the “main” icon it was. As for other icons - try using same variable for “ha-state-icon” (or how it is called)

Mariusthvdb · January 8, 2025, 9:17pm

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

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

derseidi · January 17, 2025, 11:16am

I also tried to add --mdc-icon-size: to state icons of the new heading card.
And I want also to change the font-size of the heading subtitle and the badges.
Unfortunately, I can achieve only one of them at the same time.
I can do this (for the state icon size):

type: heading
heading: Büro
heading_style: subtitle
card_mod:
  style:
    .badges hui-entity-heading-badge $: |
      ha-state-icon {
        --mdc-icon-size: 18px;
      }
badges:
  - type: entity
    show_state: false
    show_icon: true
    entity: binary_sensor.arbeitszimmer_fenster
    color: orange
    tap_action:
      action: more-info

And I can do this (for the font-size; no matter if ha-card or :host):

type: heading
heading: Büro
heading_style: subtitle
card_mod:
  style: |
    ha-card {
      --ha-heading-card-subtitle-font-size: 150%;
      --ha-heading-badge-font-size: 150%;
    }
badges:
  - type: entity
    show_state: false
    show_icon: true
    entity: binary_sensor.arbeitszimmer_fenster
    color: orange
    tap_action:
      action: more-info

Has anyone an idea, how to mix them to get both.
I have tried and read a lot, but not found a solution.
Please help.

derseidi · January 17, 2025, 4:33pm

Now, I found a solution to get both.

The code is not as simple as i thought.

type: heading
heading: Büro
heading_style: subtitle
card_mod:
  style:
    .badges hui-entity-heading-badge $: |
      ha-state-icon {
        --mdc-icon-size: 20px;
      }
      state-display {
        font-size: 150%;
      }
    .: |
      .type-heading .container .content {
        font-size: 150%;
      } 
badges:
  - type: entity
    show_state: false
    show_icon: true
    entity: binary_sensor.arbeitszimmer_fenster
    color: orange
    tap_action:
      action: more-info

Mariusthvdb · January 19, 2025, 2:19pm

continuing some more styling findings:

  - 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: 24px;
            }
            state-display {
              color: {{states('sensor.volgende_afval_kleur')}};
              text-transform: capitalize;
            }
        .badges hui-heading-badge:nth-child(2) hui-entity-heading-badge $: |
            state-display {
              color: var(--text-color-on);
            }
        .: |
          .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')}};
          }
          .badges {
            background: var(--background-color-on);
            padding: 4px;
            border: 2px solid {{states('sensor.volgende_afval_kleur')}}
          }

I especially like the text-transform, to make those states show a more acceptable Frontend UI like style…