title: Change background color stepper angular material with condition
body: <p>I would change dynamically color of the stepper in an Angular Material project. I could have more than one state for each step. For example:</p>
  
  <pre><code>state: OK (should be green)
  state: REFUSED (should be red)
  </code></pre>
  
  <p>So, that's what I have done so far</p>
  
  <pre><code>&lt;mat-horizontal-stepper&gt;
                       &lt;mat-step state="schedule"&gt;
                          &lt;ng-template matStepLabel&gt;
                              &lt;span [ngClass]="{'ok-step': status == 'OK', 'step-refused': status == 'REFUSED'}" *ngIf="(status == 'OK' || status == 'REFUSED'); else default"&gt;
                                  {{status}}
                              &lt;/span&gt;
                              &lt;ng-template #default&gt;
                                  Default state
                              &lt;/ng-template&gt;
                          &lt;/ng-template&gt;
                      &lt;/mat-step&gt;
   &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  
  <p>Here I can change the color of the text in a dynamic way. It works. But I can't change the color of the background of the stepper. I can do this in this way:</p>
  
  <pre><code>::ng-deep.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
      background-color: #dd2c00 !important
  }
  </code></pre>
  
  <p>But here's another problem. In this way I can't set 2 different colors. Just one. I can't set red or green depending on the state. Is there any possibility to do this?</p>