I can't show any icon on buttons

[Ghidarcea]

Hey,

I want to have buttons with icon and text and I tried to use the example from the site:

<EjsButton IconCss="e-icons e-play-icon">PLAY</EjsButton>

<EjsButton IconCss="e-icons e-plus-icon">ADD</EjsButton>

It doesn't work - instead of an icon, it's just a blank space on the button. I found a similar problem on this forum and I downloaded the "style.css" you provided and included it in my main css file. I attached a zip with the content of my wwwrootfolder. You can see my .css files in there.

Can someone figure out what I'm doing wrong? Thank you.

Attachment: wwwroot_e9546675.zip

[Madhan Venkateshan]

Hi Ghidarcea, 

 

Thanks for contacting Syncfusion support. 

 

We have checked your query. We suggest you to define custom css class (e-play-icon) which contains the icon in the content property and assign the custom css class to IconCss property of the Button control. We have prepared a sample based on your requirement, please refer the below code snippets and sample link. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/149716/ze/ButtonIcon-1597754379 

 

Index.razor 

<EjsButton IconCss="e-icons e-media-play">PLAY</EjsButton> @*predefined class defined in style.css file which contains icons*@ 

<EjsButton IconCss="e-icons e-play-icon">PLAY</EjsButton> 

<EjsButton IconCss="e-icons e-plus-01">ADD</EjsButton> 

<EjsButton IconCss="e-icons e-plus-icon">ADD</EjsButton> 

<style> 

    .e-play-icon::before { /*custom class to define icon*/  

        content: '\e798'; 

    } 

    .e-plus-icon::before { 

        content: "\e7ba"; 

    } 

</style> 

 

Regards, 

Madhan V 

[Ghidarcea]

Thank you!

After I integrated it into my solution I faced this problem: the font-family was affecting all my controls, so I made the following changes in style.css:

.e-btn-icon{

    font-family: 'e-icons';

 ............................................................

    -moz-osx-font-smoothing: grayscale;

}

/*span {

    font-size: 100px

}*/

Now it looks fine. Thank you again!

[Madhan Venkateshan]

Hi Ghidarcea, 

  

We are happy to hear that your reported issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

  

Regards, 

Madhan V