Creating dojo button declaritively

I am trying to make dojo buttons declaratively rather than programmatically. However, I cannot seem to get the data-dojo-props iconClass attribute to work correctly.

<head>
    <meta charset=utf-8" />
    <script src="dojo/dojo.js" data-dojo-config="async:true"></script>
    <script src="scripts/dojoMain.js"></script>
</head>
<body>
<p id="picForm" name="picForm" action="#">
    <button data-dojo-type="dijit/form/Button" data-dojo-id="hide">   </button>
    <button data-dojo-type="dijit/form/Button" data-dojo-id="next" data-dojo-props="iconClass:'dijitEditorIcon'" type="button"></button>
</p>

I have dojo.js correctly linked as my first problem was spelling digit rather than dijit... However, now when trying the data-dojo-props="iconClass:'dijitEditorIcon'" it doesn't seem to work.

Any help would be appreciated, thanks!

EDIT: Just noticed the a lack of closing quotations in the meta tag, however, the problem persists.

Solution

First you missed to refer a dojo css theme file by example claro.css , don't forget to append class="claro" to your body tag.

Second point is also you missed a class that refer to icon , note that dojo use sprites css , dijitEditorIcon refer to image url background and you have to specify a second class that refers to the postion of this last in the images background iconClass:'dijitEditorIcon dijitEditorIconCut'

you can find here icon class name for dijitEditorIcon IconClass names

bellow a working snippet :

require(["dojo/parser"],function(parser){
  parser.parse();
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<body class="claro">
  <p id="picForm" name="picForm" action="#">
      <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitEditorIcon dijitCheckBoxIcon'" data-dojo-id="hide"> </button>
      <button data-dojo-type="dijit/form/Button" data-dojo-id="next" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut'" type="button"></button>
  </p>
</body>

Refer to this for more understanding about available themes => Link