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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

I can't show any icon on buttons

Thread ID:

Created:

Updated:

Platform:

Replies:

149716 Dec 6,2019 11:18 AM UTC Dec 10,2019 05:26 PM UTC Blazor 3
loading
Tags: Button
Ghidarcea
Asked On December 6, 2019 11:18 AM UTC

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 [Syncfusion]
Replied On 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. 
 
 
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
Replied On 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:

.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 [Syncfusion]
Replied On 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. 
  
Regards, 
Madhan V 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon