Set Customize Icon to Custom Ribbon Action button in SharePoint

Today I explored how to set customize icon to custom ribbon action that there 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 below code snippet of elements.xml of ribbon custom action which will generate 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 show the button with the placeholder icon:

Solution:
A better workaround is to use Data URIs which 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:

Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted AppFinal Output Customize Icon to Ribbon button

You may like following SharePoint tutorials:

• Create custom ribbon button in list or document library using SharePoint designer 2013
• Add custom action button in List ribbon using SharePoint designer 2013
• SharePoint 2010 to 2013 migration Custom New Folder in Ribbon Disabled
• Ribbon control missing for list in SharePoint Online
• Add/Remove User Custom Actions (Site Actions Menu) Programmatically using JSOM in SharePoint Online
• Display SharePoint List Items in Hyperlink in SharePoint Hosted Add-in or Apps
• SharePoint Hosted Apps: Create Choice Type Column in SharePoint Online
• SharePoint Hosted Add-in: Send Email to SharePoint group using visual studio workflow
• Video Tutorial: Create and Deploy SharePoint Hosted Add-in using Visual Studio
• SharePoint Hosted Add-in: Send Email using visual studio workflow

Note: There are a lot of image data URI generators online like this one.