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].

Answer 1

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>