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

Ribbon - how to use my own images


how can I use my own image files (e.g. png) with the ribbon contents, e.g. a button?


1 Reply

SK Sarath Kumar P Syncfusion Team May 15, 2017 12:36 PM UTC

Hi Daniel, 
You can use your own image types with ribbon button using "prefixIcon" or "suffixIcon" properties of ejButton control. Please refer to the below codes and the attached sample. 
groups1 = [{ 
        text: "New", 
        alignType: "rows", 
        content: [{ 
            groups: [{ 
                id: "new", 
                text: "Png Image", 
                toolTip: "Png Image", 
                buttonSettings: { 
                    width: 100, 
                    prefixIcon: "ribbonimg", 
                 contentType: "imageonly" 
            defaults: { 
                height: 70 
.ribbonimg { 
    backgroundurl(images/Protect.png) no-repeat center; 
Api Links: 
Sarath Kumar P. 

Live Chat Icon For mobile
Up arrow icon