title: Angular 9 - Remove default icon (create) on Angular Material Stepper
body: <p>I'm facing this annoying problem with Angular: I overrode stepper icons by adding in to the <code>provides</code> of the page:</p>
  
  <pre><code>provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false, showError: true}
  </code></pre>
  
  <p>This is the HTML page (just a piece, there are 7 elements copy/pasted):</p>
  
  <pre><code>&lt;mat-horizontal-stepper&gt;
  
    &lt;!-- AREA --&gt;
    &lt;mat-step label="Step 1" state="area"&gt;
      &lt;p&gt;Put down your phones&lt;/p&gt;
      &lt;div&gt;
        &lt;button mat-button matStepperNext&gt;Next&lt;/button&gt;
      &lt;/div&gt;
    &lt;/mat-step&gt;
  
    &lt;!-- QUESTION --&gt;
    &lt;mat-step label="Step 2" state="question"&gt;
      &lt;p&gt;Socialize with each other&lt;/p&gt;
      &lt;div&gt;
        &lt;button mat-button matStepperPrevious&gt;Back&lt;/button&gt;
        &lt;button mat-button matStepperNext&gt;Next&lt;/button&gt;
      &lt;/div&gt;
    &lt;/mat-step&gt;
  
    &lt;!-- MODE --&gt;
    &lt;mat-step label="Step 3" state="mode"&gt;
      &lt;p&gt;Socialize with each other&lt;/p&gt;
      &lt;div&gt;
        &lt;button mat-button matStepperPrevious&gt;Back&lt;/button&gt;
        &lt;button mat-button matStepperNext&gt;Next&lt;/button&gt;
      &lt;/div&gt;
    &lt;/mat-step&gt;
  
  ...
  
  &lt;!-- Icon overrides --&gt;
    &lt;!-- AREA --&gt;
    &lt;ng-template matStepperIcon="area"&gt;
      &lt;mat-icon&gt;gavel&lt;/mat-icon&gt;
    &lt;/ng-template&gt;
  
    &lt;!-- QUESTION --&gt;
    &lt;ng-template matStepperIcon="question"&gt;
      &lt;mat-icon&gt;contact_support&lt;/mat-icon&gt;
    &lt;/ng-template&gt;
  
    &lt;!-- MODE --&gt;
    &lt;ng-template matStepperIcon="mode"&gt;
      &lt;mat-icon&gt;forum&lt;/mat-icon&gt;
    &lt;/ng-template&gt;
  ...
  </code></pre>
  
  <p>As you can see, it's just the example you can find on Angular 9 <a href="https://material.angular.io/components/stepper/overview#step-states" rel="nofollow noreferrer">documentation</a></p>
  
  <p>Well, now let me introduce the problem with several image: </p>
  
  <p><a href="https://i.stack.imgur.com/yrhxZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yrhxZ.png" alt="First step, create icon instead of gavel icon"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ARaZx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ARaZx.png" alt="Second step, same situation of first one. create icon instead of contact_support icon"></a></p>
  
  <p><a href="https://i.stack.imgur.com/sdMTO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sdMTO.png" alt="...and of course, same annoying behaviour"></a></p>
  
  <p>Just look at the circles, they should have inside their own icons (gavel, constact_support, forum). But when I'm on one of those steps, it replaces the icon with another one, to be precise with <strong>create icon</strong>.</p>
  
  <p>Now, if I come back to the second step, into the circle spawn the correct icon, without this annoying overwriting:</p>
  
  <p><a href="https://i.stack.imgur.com/KmDFT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KmDFT.png" alt="enter image description here"></a></p>
  
  <p>I already tried:</p>
  
  <ol>
  <li>Set <code>[completed]=false</code> on <code>&lt;mat-step&gt;</code> component, but it just remove the check icon in to the previous circles</li>
  <li>Override the icon:</li>
  </ol>
  
  <pre><code>&lt;ng-template matStepperIcon="edit"&gt;
    &lt;mat-icon&gt;gavel&lt;/mat-icon&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>But it's useless since it just overrides the icon, so the problem still exists. I also tried to leave the <code>&lt;mat-icon&gt;&lt;/mat-icon&gt;</code> empty, but of course it just leaves a blank icon in to the circle. </p>
  
  <p>What I'm trying to achieve is by-pass this "automatic overwriting". Any idea?</p>