.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Sandeep Singh
Melody Anderson
Eminent IT

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Custom Ribbon Action and Set the Customize Icon to Ribbon Button in a SharePoint Hosted App

Posted By:Sagar Pardeshi       Posted Date: April 16, 2015    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

In this article you will learn how to set the Customize Icon to Ribbon Button in a SharePoint Hosted App.


This article explains the Custom Ribbon Action to set the Custom Image to a Ribbon button and that is absolutely awesome! I was creating a Custom Action in my SharePoint Hosted app. I wanted to add a Button into the Ribbon of any Custom List to my App Web and do some work based on List Information. I started by adding a Custom Ribbon Action.

You can see the following code snippet of elements.xml of the Custom Ribbon Action that will be generated for you based on your settings selected in the wizard.

Have a look at the highlighted code in the previous block. You will notice that the icon of the button is a placeholder you have the ability to change. The next screenshot shows the button with the placeholder icon:


A better workaround is to use Data URIs that is a way of embedding the actual image data in the src attribute of the img tag. The only limitation is browser support for example.

The code after applying this workaround will be like this:

The following is the final output of the Customize Icon to Ribbon button.

Note: There are many image data URI generators online like this one.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend