title: how to change icon in button on click with Angular Js
body: <p>I have the following code:</p>
  
  <pre><code>&lt;md-button class="md-icon-button" aria-label="Favorite" hide-gt-sm ng-click="openLeftMenu()"&gt;
       &lt;md-icon&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/md-icon&gt;
  &lt;/md-button&gt;
  </code></pre>
  
  <p>As you can see, inside <code>md-button</code> tag I have <code>md-icon</code> which contains an <code>i</code> element. I want to change the <code>i</code> tag when I click the button. This icon should change back when I click it again. Simply, I want a toggle effect with two icons and I want to achieve this using Angularjs.</p>