Adding an Image to a dojo button

Question

I have a requirement of adding an image to a dojo button instead of adding text.

Could anyone guide to do it?

Answer 1

This is a sample taken from the tutorials on the dojo toolkit site. It creates a button with a new task icon, and no text.

<script>
            require(["dijit/form/Button", "dojo/domReady!"], function(Button) {
                var button2 = new Button({
                    iconClass: "dijitEditorIcon",
                    showLabel: false,
                    label: "Click Me!", // analogous to title when showLabel is false
                    onClick: function(){ console.log("Second button was clicked!"); }
                }, "btn2");

                button2.startup();
            });
        </script>

The bit you're interested in would be showLabel: false which hides the text ,and iconClass: "dijitEditorIcon" which shows an icon defined in the css

In order to add your own "icon", examine the following CSS:

.dijitEditorIcon {
  background-image: url('images/editorIconsEnabled.png');
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  text-align: center;
}

Essentially, you create a class in CSS with a background-image, then you apply that styling to you dojo button via the "iconClass" property.

Answer 2

If I might add, you can use this declaratively (and those examples are using the dijit's default icon):

    <button id="insertNewItem" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass: 'dijitIconNewTask'" type="button"> Insert </button>
    <button id="updateSelectedItem" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass: 'dijitIconEdit'" type="button"> Update </button>
    <button id="deleteSelectedItem" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass: 'dijitIconDelete'" type="button"> Delete </button>