[Feature]: Add 'Animate icon when active' configuration variable to template card

[GitHubGoody]

Is your feature request related to a problem?

I like the animation* option available in the fan card, but need the customization that the template card provides for setting custom icons, colors, actions, etc. The one thing I currently cannot do easily with a template card is spin the icon.

*Should this be changed to 'spin' as a specific type of animation (unless planning to add other animation options)?

Describe the solution you'd like

Add an 'Animate icon when active' configuration variable to the template card.

Describe alternatives you've considered

I’ve tried to animate the rotation of only the icon in a Mushroom Template Card, but I cannot seem to find the right element to target…ha-card gets the entire template strip, ha-icon doesn’t work at all.

Additional context

No response

[RJ]

I would like to have Animated icon also for all cards. I try to do it on the mushroom-entity-card with no luck. but the default entity-card work fine. I was using card-mod to make icon spin on a default entity-card.

[RJ]

@GitHubGoody just figured out how to do it in card-mod!! 🎉

code:

type: custom:mushroom-entity-card
entity: input_boolean.test_switch_card
card_mod:
  style: |
    mushroom-shape-icon {
      --shape-animation: spin 1.5s linear infinite;
    }

it took me a couple days to figure it out lol
I only tested it in the mushroom-entity-card. have not try to test the others cards yet

code(example/more detail):

if you want it to stop spinning depending on status
also, icon status change also work!

type: custom:mushroom-entity-card
entity: input_boolean.test_switch_card
card_mod:
  style: |
    mushroom-shape-icon {
       {% if states('input_boolean.test_switch_card') == 'on' %}
         --card-mod-icon: mdi:lamps;
         --shape-animation: spin 1.5s linear infinite;
       {% else %}
         --card-mod-icon: mdi:lamps-outline;

       {% endif %}
         
     }

• make sure you change input_boolean.test_switch_card in the {% if states('input_boolean.test_switch_card') == 'on' %} or it will not change the status for the icon.
• also, if the icon does not spin or the card disappeares after you edit the card, try exiting edit mode and refresh the page.

[LeiChat]

I have used pulse animation which I think works well for devices that you want to highlight when they are active charging/diverting.

card_mod: style: mushroom-shape-icon$: | ha-icon { {{ '--icon-animation: pulse 3s linear infinite;' if is_state('sensor.myenergi_zappi_SERIAL_plug_status', 'Charging') }} }