Igx Grid Sort Icon Change

[sajeesh-pankajakshan]

Igx Grid Sort Icon Change

We are using 'igniteui-angular' version '12.1.5'. Need to change the 'igx-grid' column sort icons with custom icons. Three state of sorting icons needed to be changed(Ascending, Descending and Normal).
In the existing grid sorting icons are shown as in the below image.

We need to change the icons in the image above to below.

Describe the solution you'd like

We need grid property or option for changing sorting icons.

[sajeesh-pankajakshan]

With out any performance issue is there any possibility to change the sorting icon through style, theming or any script ?

[viktorkombov]

With out any performance issue is there any possibility to change the sorting icon through style, theming or any script ?

We will prioritize this task and include it in our next sprint for review and development. Until the feature is implemented, what I can suggest is using the following temporary workaround that I prepared for you:

In this workaround, each time when the grid is rendered or the sorting expressions are changed, the native element of the sorting icon is selected and its text content is changed depending on what sort order is set for the current column:

HTML
<igx-grid igxPreventDocumentScroll #grid1 [data]="data" (sortingDone)="sortingHandler($event)">
       ...
</igx-grid>

TYPESCRIPT
public ngAfterViewInit(): void {
    Array.from(
      this.grid.nativeElement.getElementsByClassName('sort-icon')
    ).forEach((elem: Element) => {
      elem.textContent = 'unfold_more';
    });

    if (this.grid.sortingExpressions.length > 0) {
      this.grid.sortingExpressions.map(column => this.sortingHandler(column));
    }  
}

public sortingHandler(sortingExpression: ISortingExpression): void {
    const sortIcon = this.grid
      .getColumnByName(sortingExpression.fieldName)
      .headerCell.nativeElement.getElementsByClassName('sort-icon')[0];

    if (sortingExpression.dir === 0) {
      sortIcon.textContent = 'unfold_more';
    } else if (sortingExpression.dir === 1) {
      sortIcon.textContent = 'expand_less';
    } else {
      sortIcon.textContent = 'expand_more';
    }
}

Please keep in mind that with this workaround you are limited to use only the icons that are provided by the material icon set by Google.

I have created a small sample demonstrating how the above approach is working. Please test it on your side and let me know whether you find it helpful.