title: How to use animated material icons in vuetify
body: <p>By the <a href="https://vuetifyjs.com/en/components/icons" rel="noreferrer"><code>v-icon</code> component</a> of Vuetify, using mainstream <a href="https://material.io/tools/icons/?style=baseline" rel="noreferrer">material design icons</a> is quite straightforward like:</p>
  
  <pre><code>&lt;v-icon&gt;home&lt;/v-icon&gt;
  </code></pre>
  
  <p>Now, I wonder if <a href="https://material.io/design/iconography/animated-icons.html#" rel="noreferrer">animated material icons</a> 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.</p>
  
  <p>In the <a href="https://vuetifyjs.com/en/components/icons#examples" rel="noreferrer">examples</a>, I have noticed the usage of <code>fa-spin</code> for Font Awesome; yet it is out of scope. I am bound to Google's material icons library.</p>
  
  <p><strong>EDIT:</strong> The specific kind of behavior I need is in the video examples in <em>transitions</em> section here: <a href="https://material.io/design/iconography/animated-icons.html#" rel="noreferrer">https://material.io/design/iconography/animated-icons.html#</a> [See how a <code>play</code> button becomes <code>pause</code> with a smooth animation when clicked].</p>