I'm using PrimeNG p-steps on Angular 9 and I want to show a "check" icon/image on each step title when previous screen was complete. I did on last step the behavior I wanted:

I did this changing the css, putting the image on all steps and removing of highlighted:

:host ::ng-deep .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-title{
  font-size: 18px;
  background-image: none; /* This remove image on highlighted step */
}

:host ::ng-deep .ui-steps .ui-steps-item .ui-steps-title{
  font-size: 18px;
  background-image: url('src/assets/img/check-circle-2.png');
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 25px;
}

However, if I am on step 2, the same aproach is not possible because I was adding the image on all steps "unactive" and in this case, the step 3 would affected. So, if it's possible, how can I put the checked image on example below, only in step 1?

I even tried to find a way to manipulate the CSS by component.ts but I can't. I tried to put a icon on object in ts file but not works, some like on this post question: How to add images in steps using primeNG for Angular8?.

My implementation :

HTML:

<p-steps id="steps" [model]="steps"></p-steps>

TS component:

steps: MenuItem[];

ngOnInit(): void {

    this.steps = [
      { label: 'Step 1' },
      { label: 'Step 2' },
      { label: 'Step 3' }
    ];
  }

If anyone known a way to identify the fist step title by CSS, could solve the problem.

Thanks!