use svg image for toolbaritem image instead of class

[HappyCamper]

Any chance it is possible to use svg images instead of classes for toolbar items?

[Satheesh Kumar Balasubramanian]

Hi Happy,

Greetings from Syncfusion support! 

We have validated your case and we suggest you to define the <img> tag with required attributes inside the Template element of Toolbar. We have prepared a sample based on your requirement and refer below code for that

@using Syncfusion.EJ2.Blazor.Navigations 

 

<SfToolbar>

    <ToolbarItems>

        <ToolbarItem Type="@ItemType.Button" Text="New" TooltipText="New Record">

            <Template>

                <img class="empImg" src="images/new.svg" />

            </Template>

        </ToolbarItem>

        <ToolbarItem Type="@ItemType.Button" Text="Delete" TooltipText="Delete Record">

            <Template>

                <img class="empImg" src="/images/Delete.svg" />

            </Template>

        </ToolbarItem>

        <ToolbarItem Type="@ItemType.Separator"></ToolbarItem>

    </ToolbarItems>

</SfToolbar>

Also, you can download this sample from the below link 

https://www.syncfusion.com/downloads/support/forum/159064/ze/ToolbarComponent-1933978068

Regards 

Satheesh Kumar B

[HappyCamper]

ok, done that.  I guess I have to then also explicitly also add text after the image should I want text to show on the button, correct? (Setting the Text property when using the template doesn't set the text)  

Also, the hover over effect doesn't work when using the template.  Anything I need to do to easily reenable it?

Any chance that natively supporting svgs or images for the icons of a toolbaritem can be requested as a feature?  I'm sure there's a bunch of use cases where others would also like to use that as the standard.

[Satheesh Kumar Balasubramanian]

Hi Happy, 

  

Thanks for your update. 

  

We have validated your reported case at our end and suggest you to define the SfButton inside template of Toolbar Item to overcome the hover over effect and doesn't set the text to Toolbar Item issue. 

  

Code snippet:  

@using Syncfusion.Blazor.Navigations 

@using Syncfusion.Blazor.Buttons 

  

<SfToolbar> 

    <ToolbarItems> 

        <ToolbarItem Text="New" TooltipText="New Record"> 

            <Template> 

                <div> 

                    <SfButton IsToggle="false"> 

                        <span>New</span> 

                        <img class="empImg" src="images/new.svg" /> 

                    </SfButton> 

                </div> 

            </Template> 

        </ToolbarItem> 

        <ToolbarItem Text="Delete" TooltipText="Delete Record"> 

            <Template> 

                <div> 

                    <SfButton IsToggle="false"> 

                        <span>Delete</span> 

                        <img class="empImg" src="images/Delete.svg" /> 

                    </SfButton> 

                </div> 

            </Template> 

        </ToolbarItem> 

    </ToolbarItems> 

</SfToolbar> 

  

  

Sample: https://www.syncfusion.com/downloads/support/forum/159064/ze/ToolbarComponent1701937097 

  

Kindly try the above sample and get back to us if you need further assistance. 

Regards, 

Satheesh Kumar B