title: How to change which ionicon is displayed upon menu toggle
body: <p>What I'm trying to do is have the 'menu-outline' ionicon display on my website, until it is clicked and the menu is toggled, where the 'close-outline' icon will replace it, and vice versa. I'm using jQuery.</p>
  
  <p>I know you can toggle classes, but my ionicons are not defined by their classes, but by their names: </p>
  
  <pre><code>&lt;a class="menu-button js-menu-button"&gt;&lt;ion-icon name="menu-outline"&gt;&lt;/ion-icon&gt;&lt;/a&gt;
  </code></pre>
  
  <p>My jQuery so far only toggles the menu but does nothing with the icon:</p>
  
  <pre><code> $(".js-menu-button").click(function() {
      var nav = $(".js-main-nav");
      var icon = $(".js-menu-button ion-icon");
      /* appear and disappear */
      nav.slideToggle(200);
  });
  </code></pre>
  
  <p>Is there any way I can toggle the name of the icon? Or is there another way to do this? Thanks for any suggestions.</p>