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.

6

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!

7

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!

8

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