title: Using *ngIf on a directive
body: <p>I have a <code>mat-icon</code> and a <code>mat-badge</code> on it containing a number.</p>
  
  <p>I'm looking for removing the <code>mat-badge</code> only if the number is <code>&lt;=0</code>.</p>
  
  <p>I did <code>*ngIf</code> on the entire <code>mat-icon</code>, the result its obvious, it remove both <code>mat-icon</code> and <code>mat-badge</code>.</p>
  
  <p>Here is the code</p>
  
  <pre><code>&lt;mat-icon matBadge="{{matBadge}}" class="icon"&gt;shopping_cart&lt;/mat-icon&gt;
  </code></pre>