Hello everyone,
I would like to use this animation on my badge icon, but I don’t quite understand it. I can’t figure out how to address the badge icon.
I have tried “ha-badge-icon”, “mushroom-badge-icon$”, “.badge-icon” and “.card-content .badge” and a few more, but it does not work. What should I use?
Here is the original:
type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
style: |
ha-state-icon {
animation: spin 1s linear infinite;
}
The part that animates the icon (the icon is mdi:fan - standard icon that comes with HA; nothing special needed here) is the card_mod piece of CSS. For that to work, you need to have card_mod installed (from HACS would be easiest).
Re-reading, it may also sound like you don’t know how to make the CSS target the icon itself. If that’s the case, easiest is open dev tools in your browser, inspect the icon, and look at the element/parent and then you should get an idea of what your CSS selector should be. BTW, if nothing is working, try prepending :host to it ( :host - CSS: Cascading Style Sheets | MDN) because there’s shadow DOM’s used everywhere and w/out it you’ll never select your icon.
Can you provide more details about what you consider a badge icon on your dashboard? The advice @esand has provided is sound, but addresses the card’s main icon. Do you mean something different?
For example the red spinning circle is what I consider a badge…
Yes, that’s exactly what I mean.
I’ve got it! Thanks for the tip about inspecting, I’ll keep that in mind.
Hi @AnRi215,
can you please share your code to success? I am struggling aswell with the mushroom badge-icon animation.
type: custom:mushroom-template-card
primary: Schlafzimmer
secondary: >-
{{ states('sensor.Schlafzimmer_temperatur_sensor_temperature') }}°C | {{
states('sensor.schlafzimmer_temperatur_sensor_humidity') }}%
icon: mdi:bed
icon_color: "{{ 'orange' if is_state('light.schlafzimmer_licht', 'on') else 'green' }}"
badge_icon: |-
{% if is_state('binary_sensor.schlafzimmer_fensterkontakt_contact' , 'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
badge_color: |-
{% if is_state('binary_sensor.schlafzimmer_fensterkontakt_contact' , 'on') %}
red
{% else %}
green
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mobile/schlafzimmer
layout: vertical
Thank you!
Hey @omeier77,
I would like to help you.
I no longer have the original code snippet from back then, the use case for it was a while ago, but this is what I have. You can simply remove the parts with the “wiggle”:
type: custom:mushroom-template-card
icon: mdi:bacteria
icon_color: red
primary: Schimmel
card_mod:
style: |
ha-state-icon {
animation: wiggle 0.5s ease infinite;
transform-origin: 80% 80%;
}
mushroom-shape-icon {
display: flex;
animation: spin 20s infinite;
}
@keyframes wiggle {
0%, 100% { transform: scale(1) rotate(1deg); }
50% { transform: scale(1.04) rotate(-2deg); }
My only worry is that your code doesn’t contain any animation(s). What exactly do you have in mind?
With best regards!
If you mean the icon within the badge, here is an example
type: custom:mushroom-template-card
icon: mdi:home
badge_icon: mdi:fan
badge_color: blue
card_mod:
style: |
mushroom-badge-icon {
--badge-icon-size: 10px;
--badge-size: 15px;
animation: spin 1s linear infinite;
}
In case someone comes across this, the code mentioned of LiQuid_cOOled animates the complete badge. Doesn’t matter if you want to spin it, but makes a hole in your badge if you use clip-path.
I was able to animate only the icon of my badge using this code:
type: custom:mushroom-legacy-template-card
primary: ""
secondary: ""
layout: vertical
tap_action:
action: toggle
icon: mdi:tablet-dashboard
icon_color: red
badge_icon: mdi:battery-high
badge_color: red
card_mod:
style:
mushroom-badge-icon$: |
.badge ha-icon {
animation: charge 3s steps(1) infinite;
}
@keyframes charge {
0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%,67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%);}
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
The code I posted was from March and was for that specific scenario. To ensure the provided resolution is clear, there have been Breaking Changes with the latest updates to the Mushroom code. Those changes are discussed in the main Mushroom threads here and here
Legacy Template Card
type: custom:mushroom-legacy-template-card
layout: vertical
tap_action:
action: toggle
icon: mdi:tablet-dashboard
icon_color: red
badge_icon: mdi:battery-high
badge_color: red
card_mod:
style:
mushroom-badge-icon$: |
ha-icon {
animation: charge 3s steps(1) infinite;
}
@keyframes charge {
0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%,67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%);}
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
New Mushroom Template Card
type: custom:mushroom-template-card
layout: vertical
tap_action:
action: toggle
icon: mdi:tablet-dashboard
icon_color: red
badge_icon: mdi:battery-high
badge_color: red
card_mod:
style:
ha-icon$: |
ha-svg-icon {
animation: charge 3s steps(1) infinite;
}
@keyframes charge {
0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%,67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%);}
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
thanks, to be honest I couldn’t figure out how to do in with the new template-card, thats why I used legacy 