title: Angular 2: Setting a button with conditional content with material-icons
body: <p>Well, I'm learning angular 2, and im starting by developing a log in form, and I'm having trouble making a button with conditional content.</p>
  
  <p>This complement template's code would go like:</p>
  
  <pre><code>&lt;button class="login-button" (click)="checkData()"&gt; 
  {{isLoading ? "loading...":"Log In" }} 
  &lt;/button&gt;
  </code></pre>
  
  <p>It checks the isLoading bool, and sets a inner html in condition to this bool value. Right? </p>
  
  <p>Yes, this renders well, a button with a conditional content of "loading..." if isLoading is true, and "Log In" if its false.</p>
  
  <p>But if want to add some google material icons inside the button it stops working:</p>
  
  <pre><code>&lt;button class="login-button" (click)="checkData()"&gt; 
  {{isLoading ? "&lt;i class='material-icons'&gt;spinner&lt;/i&gt;":"Log In &lt;i class='material-icons'&gt;arrow_forward&lt;/i&gt;" }} 
  &lt;/button&gt;
  </code></pre>
  
  <p>It just doesn't work. It render a button with a content of "{{isLoading ? "spinner":"Log In arrow_forward" }}";</p>
  
  <p>How can I add the html of the icons to my posible outcomes? </p>