Hello

I currently have a problem with a sortable grid. I want to include individual icons like this Angular Grid Sorting | Data Sorting | Ignite UI for Angular | infragistics, but unfortunately I can't figure out where exactly to put the ng-template. I already have all the options that made sense to me, but the grid does not want to take my icons.

This is my grid:

<igx-grid #grid1    [data]="subordinatedUsersVm"
                                [emptyGridMessage]="emptyGridMessage"
                                [autoGenerate]="false"
                                [allowFiltering]="false"
                                [rowSelection]="'multiple'"
                                [cellSelection]="'none'"
                                [selectRowOnClick]="false"
                                [primaryKey]="'id'">

                <igx-column [sortable]="true" field="fullName" header="{{ 'usermanagement.user' | translate:l.locale.language }}">
                    <ng-template igxCell let-cell="cell">
                        <button
                            *ngIf="getProfilePicture(cell.row.data.id) != null; else initials"
                            style="background-image: url('{{ getProfilePicture(cell.row.data.id) }}')"
                            igxButton="fab"
                            class="lrnble-controlButton lrnble-controlButton-primary size-medium"
                            id="userProfilePictureBtn">
                         </button>
                        <ng-template #initials>
                            <button
                                igxButton="fab"
                                class="lrnble-controlButton lrnble-controlButton-primary size-medium h6"
                                id="userProfileBtn">{{ getUserInitials(cell.row.data.id) }}
                            </button>
                        </ng-template>
                        <span>{{cell.value}}</span>
                    </ng-template>
                </igx-column>
                <igx-column [sortable]="true" field="studyProgress" header="{{ 'usermanagement.studyProgress' | translate:l.locale.language }}">

                    <ng-template igxCell let-cell="cell">
                        <lib-progress-bar [config]="progressBarConfig" [progress]="cell.value"></lib-progress-bar>
                        <span>{{cell.value}}%</span>
                    </ng-template>
                </igx-column>
                <igx-column [sortable]="true" field="creationDate" header="{{ 'usermanagement.creationDate' | translate:l.locale.language }}"></igx-column>
                <igx-column [sortable]="true" field="learningGroups" header="{{ 'usermanagement.learningGroups' | translate:l.locale.language }}">
                    <ng-template igxCell let-cell="cell">
                        <span *ngIf="cell.value">{{ cell.value }}</span>
                        <span *ngIf="!cell.value">-</span>
                    </ng-template>
                </igx-column>
                <igx-column [sortable]="false" header="{{ 'grid.actions' | translate:l.locale.language }}">
                    <ng-template igxCell let-cell="cell">
                        <div class="lrnble-action-buttons__wrapper">
                            <!-- <button igxButton="fab"
                                    class="lrnble-controlButton lrnble-controlButton-primary size-small">
                                    <span class="material-icons-round">add</span>
                            </button> -->
                            <button igxButton="fab"
                                    class="lrnble-controlButton lrnble-controlButton-secondary size-small"
                                    (click)="navigateToStatistic(cell.row.data.id)">
                                    <span class="material-icons-round">bar_chart</span>
                            </button>
                            <!-- <button igxButton="fab"
                                    (click)="deleteUser(cell.row.data.id)"
                                    class="lrnble-controlButton lrnble-controlButton-secondary size-small">
                                    <span class="material-icons-round delete">delete</span>
                            </button> -->
                        </div>
                    </ng-template>
                </igx-column>

                <ng-template igxHeadSelector let-headContext>
                    <div class="lrnble-grid-head-selector__wrapper">
                        <igx-checkbox class="lrnble-checkbox" [checked]="mainCheckboxChecked" (change)="checkOrUncheckAll($event)"></igx-checkbox>
                    </div>
                </ng-template>
                <ng-template igxRowSelector let-rowContext>
                    <div class="lrnble-grid-row-selector__wrapper">
                        <igx-checkbox [class]="'lrnble-checkbox' + ' grid-checkbox-' + rowContext.index" [checked]="rowContext.selected" (change)="rowSelectionChangingEvent(rowContext, $event)"></igx-checkbox>
                    </div>
                </ng-template>

                <ng-template igxSortHeaderIcon>
                    <igx-icon class="material-icons-round">swap_vert</igx-icon>
                </ng-template>
                <ng-template igxSortDescendingHeaderIcon>
                    <igx-icon class="material-icons-round">arrow_downward</igx-icon>
                </ng-template>
                <ng-template igxSortAscendingHeaderIcon>
                    <igx-icon class="material-icons-round">arrow_upward</igx-icon>
                </ng-template>

            </igx-grid>