How to add a custom image to a button (dojo 1.7)

Question

How to add custom image to dojo button

here is an example code for a button without an image

<div id="zoomin" data-dojo-type="dijit.form.Button"> <span>zoomin</span> </div> 

Answer 1

These answers are close, but the style definition for your icon should include the following:

 .myIcon { background-image: url(...); background-repeat: no-repeat; width: 16px; height: 16px; text-align: center; } 

Answer 2

You can set the icon class in your widget and then provide the image in css.

 <div id="zoomin" data-dojo-type="dijit.form.Button" iconClass="myIcon"> <span>zoomin</span> </div> .myIcon { background-image: url(...); } 

http://dojotoolkit.org/reference-guide/1.7/dijit/form/Button.html#change-the-icon

Answer 3

follow Craig's answer, but to meet 1.7+ and html standards, use instead

 <div id="zoomin" data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'myIcon'"> <span>zoomin</span> </div> 

Or you can decide using the override function

 <div id="zoomin" data-dojo-type="dijit.form.Button"> <script type="dojo/method" data-dojo-event="getIconClass"> var regular = this.inherited(arguments); // this evaluation will allways be true, but here for sake of argument return (this.declaredClass == 'dijit.form.Button' ? "myButtonIcon" : regular); </script> <span>zoomin</span> </div> 

Answer 4

I am using dojo 1.10 and working using background-repeat:round

 <div id="zoomin" data-dojo-type="dijit/form/Button" iconClass="myIcon"> <span>zoomin</span> 

 .myIcon { background-image: url(...); background-repeat: round; width: 18px; height: 18px; text-align: center; }