Syncfusion AI Assistant

How can I help you?

Sorting Customization in Angular Grid Component

10 Mar 20261 minute to read

The appearance of the sorting icons and multi sorting icons in the Syncfusion® Angular Grid component can be customized using CSS. Available Syncfusion® icons can be used based on the active theme.

Customize the Grid sorting icon

The .e-icon-ascending::before and .e-icon-descending::before classes are used to style the sorting icons for ascending and descending order.

.e-grid .e-icon-ascending::before {
    content: '\e7a3'; /* Icon code for ascending order */
}
.e-grid .e-icon-descending::before {
    content: '\e7b6'; /* Icon code for descending order */
}

Grid sorting icon

Customize the Grid multi sorting icon

The .e-sortnumber class is used to style the multi sorting icon.

.e-grid .e-sortnumber {
    background-color: #deecf9;
    font-family: cursive;
}

Grid multi sorting icon