Animation for badge icon

Configuration Frontend
,
1

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;
    }
2

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.

3

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…

Untitled video - Made with Clipchamp (4)

4

Yes, that’s exactly what I mean.

5

I’ve got it! Thanks for the tip about inspecting, I’ll keep that in mind.