title: Change feather icon in JS
body: <p>I am using feathericons and I am looking to simply change the <code>data-feather</code> attribute on click of an icon with id <code>powerOn</code>.  It's a simple power button.</p>
  <p>I tried:</p>
  <pre><code>const powerOn = $('#powerOn');
  powerOn.attr('data-feather', 'stop-circle');
  </code></pre>
  <p>but that doesn't work.  I also see the API has a <code>replace()</code> function, but don't quite understand how to apply it in this case.</p>
  <p>I am looking to switch the icon back to it's initial state after the button is clicked again as in:</p>
  <pre><code>powerOn.attr('data-feather', 'power');
  </code></pre>
  <p>New to JS and JQuery and the <a href="https://github.com/feathericons/feather" rel="nofollow noreferrer">library</a> .</p>
  <p>Here is my HTML:</p>
  <pre><code>&lt;button id=&quot;connectId&quot;
          onclick=&quot;connect()&quot;
          class=&quot;btn btn-sm btn-success&quot;&gt;&lt;i id=&quot;powerOn&quot; data-feather=&quot;power&quot;&gt;&lt;/i&gt; Power On&lt;/button&gt;
  </code></pre>
  <p><strong>Update</strong>: corrected typo in question to include hashtag for element ID.</p>