title: Angular Material: How to set each mat-horizontal-stepper stepper icon with different background color in TS
body: <p>I'm unable to set the icon colors</p>
  
  <p>I have a mat-horizontal-stepper with five mat-steps (e.g. named Part A, Part B ... Part E). Each part (mat-step) may have different colors depending some business rules.</p>
  
  <p>I know how to change the "selected" mat-step or how to change the color for ALL the mat-steps (with the same color) but can't figure out how to change it dynamically so each Part may have different icon background colors.</p>
  
  <p>Using Angular v7</p>
  
  <p>The following is a style to set the third mat-step icon green. Id does work but I don't how to change the color dynamically at run-time from the component (typescript).</p>
  
  <pre><code>::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon         {
      background-color: green!important; 
   } 
  </code></pre>
  
  <p>Also I tried using <code>[ngClass]</code> but it is ignored when used as a mat-step attribute. It only works if I enclose the step label within  and use it there but that is not the requirement (I need to change the background color of the icon... not the labels).</p>
  
  <p><strong>Expected result</strong>:
  Able to set each each step with different columns depending the level of completion for each step. (mat-steps could be a combination of yellow, red, green and black),</p>
  
  <p><strong>Actual result</strong>:
  Unable to change icon colors based on component variable settings</p>