Customize the icons for pivot grid in Angular Pivotview component

23 Aug 20253 minutes to read

The Angular Pivot Table component supports the customization of various icons across its interface. This includes icons for the field list, expand/collapse actions, and other interactive elements. You can customize these icons by overriding the default CSS classes with custom Unicode values.

Customizing Field List Icon

To customize the field list icon, override the corresponding CSS class with a custom content property. The example below demonstrates how to change the default field list icon:

#PivotView_PivotFieldList .e-icons.e-toggle-field-list::before {
    content: '\e337';
}

The Unicode value '\e337' represents a specific icon from the Syncfusion icons library. Different Unicode values will display different icons.

Implementation Steps

1. Add the CSS rule to your component’s stylesheet or global styles
2. Ensure the selector targets the correct pivot table instance using the appropriate ID
3. Use valid Unicode values for the desired icons
4. Test the customization to verify the icon displays correctly

Code Example

The following sample demonstrates a pivot table rendered with customized field list icon:

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'



import { Component } from '@angular/core';
import { IDataSet, PivotView, FieldListService } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
  selector: 'app-container',
  providers: [FieldListService],
  // specifies the template string for the pivot table component
  template: `<div><ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width  showFieldList='true'></ejs-pivotview></div>`
})
export class AppComponent {
    public dataSourceSettings?: DataSourceSettingsModel;
    public width?: string;
    ngOnInit(): void {
        this.dataSourceSettings = {
            dataSource: Pivot_Data as IDataSet[],
            expandAll: false,
            enableSorting: true,
            drilledMembers: [{ name: 'Country', items: ['France'] }],
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            filters: []
        };
        this.width = "100%";
    }
 }

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));