How to use self-made SVGs to replace the toolbar icons in the Blazor pivot table

[Huron]

I have SVG like - 

   <svg viewBox="0 0 512 312.36">

       <path fill-rule="nonzero" d="M0 276.77 253.12 0 512 282.48l-32.65 29.88-226.2-246.83L32.66 306.64z"

             transform="rotate(90 256 156.18)"></path>

   </svg>

How to use self-made SVGs to replace the toolbar icons in the Blazor pivot table, such as "New report", "Save report", "Save as", and so on.

[Sridhar Karunakaran]

Hi Huron,

We understand that you would like to customize the toolbar icons in the Pivot Table with your own SVG images. You can achieve this by directly targeting the toolbar icon element, such as the New Report icon. To do so, simply hide the default icon and display your custom SVG using CSS styles.

Please note that the ID for the "Create New Report" item in the toolbar follows this naming convention: Component ID + "new"
(e.g., "PivotViewnew"). Using this ID, you can apply CSS to set the content
and background-image properties accordingly. 

Please see the code example provided below.

Code Example:

<SfPivotView ID="PivotView" TValue="ProductDetails" @ref="pivot" ShowFieldList="true" ShowToolbar="true" toolbar="toolbar">

</SfPivotView>

<style>

    /* Hide the default "New Report" icon */

    #PivotViewnew .e-new-report,

    #PivotViewnew span.e-new-report {

        display: none;

    }

    /* Display the custom SVG */

    #PivotViewnew button.e-icon-btn::after {

        content: ''; /* Must remain empty */

        display: inline-block;

        width: 24px; /* Adjust width */

        height: 24px; /* Adjust height */

        background-size: contain;

        background-repeat: no-repeat;

        background-position: center;

        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 312.36"><path fill-rule="nonzero" d="M0 276.77 253.12 0 512 282.48l-32.65 29.88-226.2-246.83L32.66 306.64z" transform="rotate(90 256 156.18)"/></svg>');

        vertical-align: middle; /* Align vertically */

    }

</style>

Output screenshots:

Before customization:

After customization:

In the meantime, we have prepared a sample for your reference, which you can find in the attachment below.

Please let us know if you have any concerns.

Regards, 

Sridhar Karunakaran

Attachment: Sample_16a62539.zip