title: How to show that the last mat-step is complete in mat-stepper?
body: <p>Okay. I can't believe that I'm posting a question for the first time over something that should be so simple to accomplish, but here we are.</p>
  
  <p>I would like for the final step in my mat-horizontal-stepper to display a checkmark icon and green background once a specific button is clicked, just like the icons for the steps prior to it. That button would be the 'Yes, confirm' button in the following image.</p>
  
  <p><a href="https://i.stack.imgur.com/dN3MH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dN3MH.png" alt="Confirmation page"></a></p>
  
  <p>Once clicked, I would like the blue icon with the number three to change into the checkmark icon that I previously described, indicating that all steps are now completed. Steps 1 &amp; 2 do it automatically because it seems as if the 'mat-step-icon-state-done' class gets applied to them once a button marked as <strong>'matStepperNext'</strong> is pressed. Sadly, Step 3 does not have such a button, so it must be done manually.</p>
  
  <p>Now, I've tried everything that would come up for a search regarding this. Many posts suggest using custom icons with states using <a href="https://stackoverflow.com/questions/48182215/css-for-completed-mat-step-in-mat-vertical-stepper"><code>&lt;ng-template&gt;&lt;/ng-template&gt;</code></a>, but that has not worked. Others have suggested marking the step with <a href="https://stackblitz.com/edit/angular-stepper-custom-icons?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer"><code>completed=true; editable=false;</code></a>, but this only works when moving to the next step as well, which means it won't apply to the final step. My hypothesis is that there must be some way to add the 'mat-step-icon-state-done' class to the mat-icon somehow, but I'm not really sure how to go about doing that. Also, please feel free to point me in the correct direction if my hunch is completely off.</p>