title: Using javascript to dynamically toggle FA icons doesn't return original icon
body: <p>I have a button which looks like this:</p>
  <pre><code>&lt;button class=&quot;btn btn-sm btn-xs-block btn-success&quot; :data-lane-id=&quot;items[0].lane.id&quot; type=&quot;button&quot; v-on:click=&quot;callNextCustomer(items[0].lane.id)&quot; :class=&quot;hasMorePeople(items)&quot;&gt;Next Customer &lt;i class=&quot;fas fa-bell&quot;&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  <p>When the button has been pressed, <code>callNextCustomer</code> function runs the following:</p>
  <pre><code>const spinnerIcon = '&lt;span class=&quot;spinner-border spinner-border-sm&quot; role=&quot;status&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;';
  var button = document.querySelectorAll('button[data-lane-id=&quot;'+lane_id+'&quot;]')
  button[0].disabled = true;
  button[0].innerHTML = 'Next Customer ' + spinnerIcon;
  // run external request using promise
  // when complete run the following
  button[0].disabled = false;
  button[0].innerHTML = 'Next Customer &lt;i class=&quot;fas fa-bell&quot;&gt;&lt;/i&gt;';
  </code></pre>
  <p>When the code is executed, the text changes as expected but the icon doesn't display. Using Google Dev Inspector I can see the icon mark up is present.</p>
  <p><a href="https://i.stack.imgur.com/VVPyF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VVPyF.png" alt="enter image description here" /></a></p>
  <p>Can anyone explain why this isn't being displayed? I am using Font Awesome v5, <s>I load both the CSS and JS into my page</s>, I load the following JS:</p>
  <pre><code>&lt;script data-search-pseudo-elements defer src=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  </code></pre>