How to use svg image like icon inside SpeedDial?

[Roberto]

hello 

I'm trying to use SVG images as icons and they don't show up.

<style>

 .logout-icon {

            background-image: url('/imagens/icons/logout.svg');

            width: 30px;

            height: 30px;

            background-repeat: no-repeat;

        }

</style>

  items.Add(new SpeedDialItem

            {

                IconCss="logout-icon",

                Id = "toolbarItemLogin",

                Text = "Logout"

            });

Attached is a model of the image.

Can you help?

Attachment: logout_1c9b215d.zip

[BharatRam Harikrishnan]

Hi Roberto,

Based on the provided details, your requirement to use SVG image as a Speed Dial item icon by defining the custom CSS styling with higher specificity since our component built-in styles override your custom styles. Please refer to the below code example to achieve your requirement.

.cshtml

@{

    List<SpeedDialItem> items = new List<SpeedDialItem>();

    items.Add(new SpeedDialItem

            {

                 IconCss = "logout-icon",

                Id = "toolbarItemLogin",

                 Text = "Logout"

            });

}

 

<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">

    <ejs-speeddial id="speeddial" target="#target" position="BottomLeft" content="Menu" items="items"></ejs-speeddial>

</div>

 

<style>

   #toolbarItemLogin .logout-icon {

        background-image: url('logout.svg');

        background-repeat: no-repeat;

        background-size: 12px 29px;

        background-position: center;

    }

</style>

Please refer to the sample and image for reference:

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample211808772

Image:

Regards, 

Bharat Ram H

[Roberto]

Perfect, but for  openIconCss="sii-layout-icon" is not working

#speeddial.sii-i layout -icon {

            background-image: url('/imagens/icons/ layout .svg');

            background-repeat: no-repeat;

            background-size: 12px 29px;

            background-position: center;

        }

Thanks

[BharatRam Harikrishnan]

Hi Roberto,

You can achieve your requirement to use an SVG image as a Speed Dial openIconCss by additionally setting the CSS height rule as shown below. Please refer to the code example below:

.cshtml

@page

@using Syncfusion.EJ2.Buttons;

@model IndexModel

@{

    ViewData["Title"] = "Home page";

 

    List<SpeedDialItem> items = new List<SpeedDialItem>();

    items.Add(new SpeedDialItem

            {

IconCss = "logout-icon",

                Id = "toolbarItemLogin",

Text = "Logout"

            });

}

 

<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">

    <ejs-speeddial id="speeddial" target="#target" position="BottomLeft" content="Menu" items="items" openIconCss="open-icon"></ejs-speeddial>

</div>

 

<style>

    #toolbarItemLogin .logout-icon {

        background-image: url('logout.svg');

        background-repeat: no-repeat;

        background-size: 12px 29px;

        background-position: center;

    }

    #speeddial .open-icon {

        background-image: url('logout.svg');

        background-repeat: no-repeat;

        background-size: 16px 31px;

        background-position: center;

        height: 30px;

    }

</style>

 

Please refer to the sample and image for reference:

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample719984064

Image:

Regards, 

Bharat Ram H

[Roberto]

Perfects.

Thanks

[Roberto]

Hey,

Unfortunately I removed this feature from my project because there are some issues.

I will reactivate it and I will send the video according to your instructions. I ask for a few days for this.

Thank you for your help.

[Silambarasan I]

Hi Roberto,

Thanks for the update. We will wait to hear from you.

Regards,
Silambarasan Ilango