Using custom svg image in sidebar

[Yoshiro]

Hi,

Is it possible to use custom images in Sidebar component? I have svg files that I need to use as Icons on the LI elements within the Sidebar. I cannot use the icons that come with Metro Studio, I need to use my own svg files.

Thank you,

Yoshiro

For example, something like this -

<SfSidebar @ref="sidebarObj" Width="220px" DockSize="72px" EnableDock=true @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div class="dock">
            

                <li class="sidebar-item" id="toggle" @onclick="Toggle">
                    <span class="images/myimg.svg expand">span>
                    <span class="e-text" title="menu">Menuspan>
                li>





[Indhumathy Loganathan]

Hi Yoshiro,

Greetings from Syncfusion support.

The Sidebar component is a simple layout component. Any HTML element can be placed in the Sidebar content area. Sidebar supports all types of HTML structures like Images, TreeView, ListView, etc. You can refer to our document and demo links to know more about the Sidebar component.

Documentation: https://blazor.syncfusion.com/documentation/sidebar/getting-started/

Demos: https://blazor.syncfusion.com/demos/sidebar/default-functionalities?theme=bootstrap4

API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html

If you face any difficulties while achieving your requirement please revert us.

Regards,

Indhumathy L