Customize the icons for pivot table

17 Feb 20223 minutes to read

You can customize the pivot button icons in the pivot table by overriding the class .pivot-button with a custom property content as mentioned below.

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

In the below sample, pivot table is rendered with a customized pivot button icons.

<ejs-pivotview id="PivotView" height="300" showFieldList="true" showGroupingBar="true">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
</ejs-pivotview>

<style>
    #PivotView_PivotFieldList_Wrapper .e-pivot-button .e-icons.e-dropdown-icon::before,
    #PivotView .e-pivot-button .e-icons.e-dropdown-icon::before {
        content: "\ec25";
    }

    #PivotView_PivotFieldList_Wrapper .e-pivot-button .e-icons.e-pv-filtered::before,
    #PivotView .e-pivot-button .e-icons.e-pv-filtered::before {
        content: "\e611";
    }

    #PivotView_PivotFieldList_Wrapper .e-pivot-button .e-icons.e-pv-filter::before,
    #PivotView .e-pivot-button .e-icons.e-pv-filter::before {
        content: '\e611';
    }

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

    #PivotView_PivotFieldList_Wrapper .e-pivot-button .e-icons.e-sort::before,
    #PivotView .e-pivot-button .e-icons.e-sort::before {
        content: '\e523';
    }

    #PivotView_PivotFieldList_Wrapper .e-pivot-button .e-icons.e-remove::before,
    #PivotView .e-pivot-button .e-icons.e-remove::before {
        content: '\e94a';
    }

    #PivotView_PivotFieldList_Wrapper .e-icons.e-drag::before,
    #PivotView .e-pivot-button .e-icons.e-drag::before {
        content: '\e571';
    }

    #PivotView .e-icons.e-expand::before {
        content: '\e22c';
    }

    #PivotView .e-icons.e-collapse::before {
        content: '\e22b';
    }
</style>
public IActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}