We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

I can't show any icon on buttons


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

3 Replies

MV Madhan Venkateshan Syncfusion Team December 9, 2019 09:40 AM UTC

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. 
<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> 
    .e-play-icon::before { /*custom class to define icon*/  
        content: '\e798'; 
    .e-plus-icon::before { 
        content: "\e7ba"; 
Madhan V 

GH Ghidarcea December 9, 2019 02:08 PM UTC

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:

    font-family: 'e-icons';
    -moz-osx-font-smoothing: grayscale;

/*span {
    font-size: 100px

Now it looks fine. Thank you again!

MV Madhan Venkateshan Syncfusion Team December 10, 2019 05:26 PM UTC

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. 
Madhan V 

Live Chat Icon For mobile
Up arrow icon