Помогите с елементом p-dropdown PrimeNg

Использую редактируемую табл. p-table. В ячейку положил елемент p-dropdown. Вот код редактируемой ячейки:

          <td pEditableColumn>
            <p-cellEditor>
              <ng-template pTemplate="input">

                <p-dropdown [options]="sprStatus"
                            optionLabel="icon"
                            [(ngModel)]="rowData.taskFactStatus">
                  <ng-template let-item pTemplate="OtherSpr">
                    <mat-icon>{{item.value.icon}}</mat-icon>
                  </ng-template>

                  <ng-template let-object pTemplate="item">
                    <mat-icon>{{object.value.icon}}</mat-icon>
                  </ng-template>
                </p-dropdown>

              </ng-template>
              <ng-template pTemplate="output">
                <mat-icon>{{rowData.taskFactStatus.icon}}</mat-icon>
              </ng-template>
            </p-cellEditor>
          </td>

sprStatus = [{value: "1", icon: "check_circle"}, 
{value: "2", icon: "explore"},
{value: "3", icon: "favorite"},
{value: "4", icon: "done"}]

taskFactStatus = [{
taskFactAction: "1"
taskFactCmt: "Я"
taskFactDate: Wed Jun 17 2020 00:00:00 GMT+0300 (Восточная Европа, летнее время) {}
taskFactId: "1"
taskFactParentId: "2"
taskFactRating: {value: "1", name: "-2"}
taskFactStatus: {icon: "check_circle", value: "1"}
taskFactTime: "00:30"
}]

Почему при клике на ячейку показывает текст я хочу, чтобы показывало иконку. Как сделать? Вот проблема: https://i.stack.imgur.com/jMYRn.jpg