My own icons

[Jens Chr. Thomsen]

I have a Blazor Server project where I use Syncfusion Blazor components.
One of the components I use is the Tab component.

My question is : How can I use my own dsigned icons in it?
Also how do I use my own designed icons else where in other Syncfusion Blazor components?

[Ram Raju Elaiyaperumal]

Hi Jens Chr. Thomsen,

Thank you for reaching out with your query. You can indeed use your custom icons in Syncfusion Blazor components, including the Tab component. Here's how you can achieve this:

Firstly, place your custom icon in the wwwroot folder of your project. Then, you can set this icon as a background image using CSS. Here's an example of how you can do this:

<SfTab>

    <TabItems>

        <TabItem>

            <HeaderTemplate>

                <div class="tab-header">

                    <span class="my-custom-icon"></span>

                    <span class="e-tab-text">Tab 1</span>

                </div>

            </HeaderTemplate>

            <ContentTemplate>

                <p>Content of Tab 1</p>

            </ContentTemplate>

        </TabItem>

        <!-- More TabItems -->

    </TabItems>

</SfTab>

 

<style>

.my-custom-icon {

    background-image: url('path-to-your-icon.ico');

    background-size: contain;

    background-repeat: no-repeat;

    width: 16px;

    height: 16px;

    display: inline-block;

    margin-right: 5px; /* Add some space between the icon and the text */

}

 

</style>

Please replace 'path-to-your-icon.ico' with the actual path to your icon file.

This approach can be used to add custom icons to other Syncfusion Blazor components as well. The exact method may vary depending on the component and where you want to place the icon.

For your convenience, we have prepared a sample that demonstrates this. Please find the sample attached.

Regards,

Ram

Attachment: Tab_5c91dca4.zip