How to add another icon to a p-panel

I need to add another icon apart from expand and close in this p-panel, but it depends on an id that I get from the getDetailGrade(tool.id) function:

TS:

    dataGrid: any;
    dataGridBrokenDown: any;
    infoGrade: any;
    hideTooltip: boolean;

    getDetailGrade(data) {
        this.gradeService.getGradeBookById(data).then(
            resCatalog => {
                this.dataGrid = resCatalog;
                console.log(this.dataGrid);
                this.hideTooltip=false;
                this.infoGrade="Something";
            }
        );
    }

SCSS:

.icon_grade {
    display: block;
    text-indent: -9999px;
    width: 100px;
    height: 82px;
    background: url('../../../assets/icon/designer/book.svg');
    background-size: 100px 82px;
}

HTML:

     <p-panel [toggleable]="true"
         (click)="onClickElement(tool.properties, i, tool)"
         [pSelectableRow]="getDetailGrade(tool.id)"
         [pTooltip]="infoGrade" [tooltipDisabled]="hideTooltip">
         [ngClass]="dataGrid !== null? tool.id:'icon_grade'">
    {{tool.id}}
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p-panel>

    <ng-template *ngIf="dataGrid !== null; else showIcon"></ng-template>
    <ng-template pTemplate="iconGrade" #showIcon>
        <i class="icon_grade"></i>
    </ng-template>

Only if I put it inside an ng-template it appears, but I don't want it like that, I want it inside the p-panel header (this icon in the header is the example of what I want to achieve):

But I don't know how to do it, the above are some attempts of what I have done and nothing is shown. I've searched various stack overflow questions and various sites, but can't find an example or satisfactory answer,I will appreciate any help.