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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add icon on ejButton

Thread ID:





128716 Feb 7,2017 06:23 PM UTC Feb 20,2017 03:38 PM UTC Angular 3
Tags: General
Asked On February 7, 2017 06:23 PM UTC


I am trying to add icon (picture from my own source) on ejButton control. I was trying to initialize component like this:

contentType: "textandimage",
prefixIcon: "e-icon e-handup",
text: "GO",

The text on button is visible, but icon is not.
Also I tried to use contentType: "imageonly" and in prefixIcon my own picture, but this is not working too.

What I need to do to make my picture appear on button?

Francis Paul Antony Raj [Syncfusion]
Replied On February 8, 2017 09:48 PM UTC

Hi Agne, 
Thanks for contacting Syncfusion Support. 
You can add the custom fonts by including the corresponding CSS file as mentioned in the provided JSPlayground sample. http://jsplayground.syncfusion.com/2xeets1k  
In the above sample, we have referred the Bootstrap theme file and then added the Bootstrap font icon as a prefix icon in ejButton. 
Also, we have provided icon templates in Metro Studio. By customizing this templates, you can create lot of unique icons and utilize it in your application. 
Francis Paul A. 

Replied On February 20, 2017 06:16 AM UTC


is there a possibility to add my own picture (that is located in project or somewhere in the internet, for example http://www.clipartkid.com/images/582/image-arrow-cliparts-co-4qvQAt-clipart.png) on the button? Or I just need to put it using only html and css?

Francis Paul Antony Raj [Syncfusion]
Replied On February 20, 2017 03:38 PM UTC

Hi Agne, 
Yes, you can add the image (.png, .jpg) files to the ejButton control as prefix icon. Please refer the below code example.  
<label for="searchByItemCodeButton">Button</label> 
<button id="searchByItemCodeButton"></button> 
     contentType: "textandimage", prefixIcon: "customImageClass", text: "GO", size: "large",  
     cssClass: "customClass" /*to customize the existing styles*/ 
            vertical-align: middle;      
            padding: 2px 6px 2px; 
            content: url('http://www.clipartkid.com/images/582/image-arrow-cliparts-co-4qvQAt-clipart.png'); /*image*/ 
            height: 18px; /*image height*/ 
            width: 32px; /*image width*/ 
        .customClass.e-btn .e-btntxt  
            display: inline-block; /*existing style has been overridden*/ 
Francis Paul A. 


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

or the page will be automatically redirected to 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