Add primeng icon with color in header of an accordion-CodePudding

I wanted to add a circle ngprime icon which will have some color after my accordion header text.

 [![<p-accordion >
        <p-accordionTab header="Product Testing"   >                 
            <div  >
                <p>Completed : <p-badge value="{{number1}}" severity="success"></p-badge>
                </p>
                <p style="float: right; clear:both;">Remaining : <p-badge value="{{number2}}" severity="danger">
                    </p-badge>
                </p>
                <em  (click)="deleteCard($event)"></em>
            </div>
            
         
        </p-accordionTab>
    </p-accordion>][1]][1]

I want to display a circle icon (pi-pi-circle) after product testing text and show a number there which will have different colors depending on condition. Please suggest

CodePudding user response：

use ng-template pTemplate="header" to add custom header content, and ngStyle to set custom colours using a variable, set the value of the variable (iconColor) based on condition

<p-accordionTab header="Header I" [selected]="true">
    <ng-template pTemplate="header">
        <i  [ngStyle]="{ color: iconColor }">
          <span>1</span>
        </i>
    </ng-template>
...
</p-accordionTab>

in the main styles.css add the below styles

.pi.header-icon {
  display: flex;
  margin-left: 8px;
  justify-content: center;
  align-items: center;
}
.pi.header-icon span {
  position: absolute;
  font-size: 0.8em;
}