title: Add animation to append-icon in v-text-field
body: <p>When a new account is registered, I display login and password details on the screen. The user can copy login&amp;passwod details to clipboard and I would like to run animation when the append-icon (scale up, increase font or replace with another icon) is clicked. What would be the right way to do that?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-card class=&quot;col-12 col-md-8 col-lg-6 p-6 px-16&quot; elevation=&quot;4&quot;&gt;
      &lt;div class=&quot;title h2 mb-10 text-uppercase text-center&quot;&gt;
        Success
        &lt;v-icon color=&quot;green&quot; x-large&gt;
          mdi-check-circle
        &lt;/v-icon&gt;
      &lt;/div&gt;
  
      &lt;v-text-field
        :value=&quot;newAccount.login&quot;
        label=&quot;Login&quot;
        outlined
        readonly
        append-icon=&quot;mdi-content-copy&quot;
        ref='login'
        @click:append=&quot;copy('login')&quot;
      &gt;&lt;/v-text-field&gt;
  
       &lt;v-text-field
        :value=&quot;newAccount.password&quot;
        label=&quot;Password&quot;
        outlined
        readonly
        append-icon=&quot;mdi-content-copy&quot;
        ref='login'
        @click:append=&quot;copy('login')&quot;
      &gt;&lt;/v-text-field&gt;
  
    &lt;/v-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    methods: {
      copy(field) {
        const input = this.$refs[field].$refs.input
        input.select()
        document.execCommand('copy')
        input.setSelectionRange(0,0) 
        // apply append-icon animation
      }
    }
  &lt;/script&gt;
  
  
  </code></pre>