How to use animated material icons in vuetify

Question

By the v-icon component of Vuetify, using mainstream material design icons is quite straightforward like:

<v-icon>home</v-icon>

Now, I wonder if animated material icons are supported and can be used in Vuetify in a similar fashion -I mean without having to add extra lines of css code etc. if possible.

In the examples, I have noticed the usage of fa-spin for Font Awesome; yet it is out of scope. I am bound to Google's material icons library.

EDIT: The specific kind of behavior I need is in the video examples in transitions section here: https://material.io/design/iconography/animated-icons.html# [See how a play button becomes pause with a smooth animation when clicked].

If you only need to add some preset animation, adding the corresponding CSS from FontAwesome (with animation descriptions) might be enough (try adding `fa-spin` or similar classes to MD Icons on that demo page). But you may need something more - `hover` animations, etc. - and that's not implemented even in FA yet. — raina77ow, Aug 29 '18 at 20:02
Hmm, I would not think of using font-awesome animation with MD Icons. However, I doubt that `fa-spin` or any other font-awesome animation would help create transitions like in the page: https://material.io/design/iconography/animated-icons.html# . Going to add it to question to make it cleaner though. — vahdet, Aug 29 '18 at 20:20
But why do you mention `fa-spin` then? It's a completely different story; a simple animation applicable to any icon basically. In your case, one should make a specific animation for each icon separately, no? — raina77ow, Aug 29 '18 at 20:40

score 9 · Answer 1 · edited May 28 '20 at 16:43

I found this page when I wanted to mimic the animation of the chevron icon when toggling the expansion panels within a v-menu icon. I am not sure if this is exactly what you needed, but this is how I've done it:

<template>
  <v-menu offset-y v-model="menuValue">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on" :class="{active: menuValue}">
        <v-icon>mdi-chevron-down</v-icon>
      </v-btn>
    </template>
  </v-menu>
</template>

<script>
  export default {
    data() {
      return {
        menuValue: null
      };
    }
  };
</script>

<style lang="scss" scoped>
  .v-btn.active .v-icon {
    transform: rotate(-180deg);
  }
</style>

James Coyle · Answer 2 · 2019-03-26T14:33:16.850

The short answer is no. The v-icon element currently renders icons from a webfont. Fonts cannot be animated in this way. You can apply simple fade, spin, scale, and flip animations to achieve a simple transition between two icons but the complex transitions you linked to in the Material Guidelines require much more work.

My recommendation is to use inline SVG icons which are available from the official icon set as well as the community driven icon set and animate between those using CSS animation, SMIL, or JavaScript.

How to use animated material icons in vuetify

2 Answers2