title: Change button icon with animation
body: <p>I am using bootstrap icons and javascript and I would like to know how can I change the icon in an animated way?</p>
  <pre><code>toClipboard: function (refElementName, sender) {
      let btn = $(sender);
      let btnIcon = btn.find(&quot;i&quot;)
  
      $(&quot;[name='&quot; + refElementName + &quot;']&quot;).select()
      document.execCommand(&quot;copy&quot;)
      
      btn.fadeOut(400)
      btnIcon.attr(&quot;class&quot;, &quot;bi bi-clipboard-check&quot;)
      btn.delay(400)
      btnIcon.attr(&quot;class&quot;, &quot;bi bi-clipboard&quot;)
  
  }
  </code></pre>
  <p>html</p>
  <pre><code>&lt;div class=&quot;col position-relative&quot;&gt;
                                          &lt;textarea name=&quot;textObs&quot; rows=&quot;5&quot; class=&quot;form-control&quot; placeholder=&quot;Observações&quot;&gt;&lt;/textarea&gt;
                                          &lt;a class=&quot;btn btn-primary&quot; id=&quot;copy&quot; onclick=&quot;toClipboard('textObs', this)&quot;&gt;&lt;i class=&quot;bi bi-clipboard&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                                      &lt;/div&gt;
  </code></pre>
  <p>I tried this, but it doesn't work as expected ... the animation happens but in the end the button is without icon</p>
  <p><a href="https://jsfiddle.net/r06s5ctn/" rel="nofollow noreferrer">https://jsfiddle.net/r06s5ctn/</a></p>