SeRiusRod
November 20, 2024, 1:06pm
1
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?
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;
}
1 Like
SeRiusRod:
icon: >
This does not work since the Heading card does not support templates.
SeRiusRod
November 27, 2024, 1:16pm
4
That worked. Thank you very much @Ildar_Gabdullin
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:
Wasn’t it already covered in my post for Heading in card-mod thread?
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
1 Like
