Estoy usando PrimeNG p-steps en Angular 9 y quiero mostrar un ícono/imagen de "verificación" en cada título de paso cuando se completó la pantalla anterior. Hice en el último paso el comportamiento que quería:

Hice esto cambiando el css, poniendo la imagen en todos los pasos y eliminando lo resaltado:

 :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; }

Sin embargo, si estoy en el paso 2, el mismo enfoque no es posible porque estaba agregando la imagen en todos los pasos "inactivos" y, en este caso, el paso 3 se vería afectado. Entonces, si es posible, ¿cómo puedo poner la imagen marcada en el ejemplo a continuación, solo en el paso 1?

Incluso traté de encontrar una manera de manipular el CSS por componente.ts pero no puedo. Traté de poner un ícono en el objeto en el archivo ts pero no funciona, a algunos les gusta en esta pregunta de publicación: ¿Cómo agregar imágenes en pasos usando primeNG para Angular8? .

Mi implementación:

HTML:

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

Componente TS:

 steps: MenuItem[]; ngOnInit(): void { this.steps = [ { label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' } ]; }

Si alguien supiera una forma de identificar el título del primer paso por CSS, podría resolver el problema.

¡Gracias!