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

Changing icon on ButtonSettings inside the ribbon

Thread ID:





119116 May 12,2015 07:41 AM UTC Sep 25,2017 12:01 PM UTC ASP.NET Web Forms 5
Tags: Ribbon
Asked On May 12, 2015 07:41 AM UTC

Hi ,
I have to change the icon inside the ribbon, but I don't know how to do because the ButtonSettings tag don't have an attributes to change the icon.
I tried to put an URL on the style ej.icons.css used by the ribbon like:

.e-ribbon .e-new:before {
    font-size: 36px;
    position: relative;
    left: -12px;
    top: -4px;

but it doesn't work.
I work with the ribbon on the assemblies

<%@ Register Assembly="Syncfusion.EJ.Web, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
<%@ Register Assembly="Syncfusion.EJ, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Models" TagPrefix="ej" %>

Can you help me?
thanks a lot

Sarath Kumar P [Syncfusion]
Replied On May 13, 2015 12:03 PM UTC

Hi Rakotondrabesa,

Thanks for using Syncfusion products.

We would like to let you know that to apply icon to the buttons in the ribbon control use properties “PrefixIcon” and “SuffixIcon” . Please refer the below Code snippets,

<ej:ContentGroup Id="undo" Text="Undo" ToolTip="Undo" IsBig="false">

<ButtonSettings ContentType="TextAndImage" ImagePosition="ImageTop" PrefixIcon="e-ribbon e-undo" Click="executeAction" Type="Button" />


<ej:ContentGroup Id="upDown" Text="Up & Down" ToolTip="Up & Down">

<ButtonSettings ContentType="ImageTextImage" PrefixIcon="e-upimg" SuffixIcon="e-downimg" Click="executeAction" Type="Button" Width="120" />


To put an URL on the content attribute refer the below format and the link,

.e-ribbon .e-new:before {

content: url('../images/arrow2.png');

font-size: 36px;

position: relative;

left: -12px;

top: -4px;


Link: http://stackoverflow.com/questions/946403/insert-image-after-each-list-item

Please find the below sample for your reference.

Sample: http://www.syncfusion.com/downloads/support/forum/119116/RibbonButtonIcons-1351014312.zip

Please let us know if you need any further assistance.


Sarath Kumar P.

Replied On May 18, 2015 07:31 AM UTC

Thanks a lot it's work

Sarath Kumar P [Syncfusion]
Replied On May 19, 2015 03:55 AM UTC

Hi Rakotondrabesa,

Thanks for your update.

Please let us know if you need any assistance.


Sarath Kumar P.

Replied On September 23, 2017 10:34 AM UTC

and how can i add a url to a button 

Karthik Ravichandran [Syncfusion]
Replied On September 25, 2017 12:01 PM UTC

Hi Kelvin, 
Thanks for contacting syncfusion support. 
We have checked your query (“how can i add a url to a button”). You can achieve your requirement by using javascript window.open method in click event of ribbon buttons. Please refer the below code block. 
<ButtonSettings Type="Button" ContentType="ImageOnly" ImagePosition="ImageTop" PrefixIcon="e-icon e-ribbon e-new" Click="executeAction" /> 
function executeAction(args) { 
    if (args.model.text == "New") { 
        window.open("https://www.syncfusion.com/", "_blank") 
For your conveniene we have attached the sample in the below link, 
Please let us know if you need further assistance on this. 
Karthik R 


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