Ribbon - how to use my own images

[Daniel Barisch]

Hi,

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

regards,

[Sarath Kumar P]

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. 

[ribbon.component.ts] 

  

groups1 = [{ 

        text: "New", 

        alignType: "rows", 

        content: [{ 

            groups: [{ 

                id: "new", 

                text: "Png Image", 

                toolTip: "Png Image", 

                buttonSettings: { 

                    width: 100, 

                    prefixIcon: "ribbonimg", 

                 contentType: "imageonly" 

                } 

                }], 

            defaults: { 

                type: "button", 

                height: 70 

            } 

        }] 

   }] 

  

[src/deps/default.css] 

  

.ribbonimg { 

    background: url(images/Protect.png) no-repeat center; 

    display: table-cell; 

    height: 50px; 

    width: 50px; 

} 

  

  

  

Api Links: 

 

https://help.syncfusion.com/api/js/ejribbon#members:tabs-groups-content-groups-buttonsettings  

 

https://help.syncfusion.com/api/js/ejbutton#members:prefixicon  

 

Sample: http://www.syncfusion.com/downloads/support/forum/130437/ze/Angular2_ribbon_png498607795 

 

Regards, 

Sarath Kumar P.