Add custom icon to dojo button in XPages

Adding icon to a dojo button is pretty simple. Jut set the dojo type to dijit.form.Button and add a dojo attribute named iconClass with value dijitEditorIcon dijitEditorIconCut.

And you get something like this:

But what if you want your own custom icon to appear on the button? The Dojo Themes and Theming Documentation explains about using custom icons. First of all import the icon image in your database. Now create a style sheet with following CSS class.

.cancelIcon {
   background-image: url("cancelicon.gif"); /* Type in your image name here */
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
   text-align: center;
}

Make sure you set the width and height to same as the width and height of the icon. Now just use this class in the iconClass dojo attribute of the button. Here is the sample source for the button:

<xp:button value="Cancel" id="btnCancel" dojoType="dijit.form.Button">
   <xp:this.dojoAttributes>
      <xp:dojoAttribute name="iconClass" value="cancelIcon"></xp:dojoAttribute>
   </xp:this.dojoAttributes>
</xp:button>

So now your button will look something like this:
Additionally you can use image sprites to put icons this way.