title: Dynamically change icon in angular 6
body: <p>I am trying to change the <code>font-awesome</code> icon depending on a certain value but it stays set to the original icon even after my model has changed. Here is my code</p>
  
  <p>In <code>Controller</code></p>
  
  <pre><code>if (foo.change &lt; 0) {
     foo.icon = "fa fa-sort-down";
  } else {
    foo.icon = "fas fa-sort-up";
  }
  </code></pre>
  
  <p>In my <code>HTML</code> </p>
  
  <pre><code>&lt;i [className]="foo.icon"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>Is there a way to update an icon dynamically based on a <code>model</code> or a <code>check</code>?</p>