Dojo给Button自定义图标

1、参考官网上的demo，可以确定在dojo中按钮上图标的添加方式
地址：https://dojotoolkit.org/reference-guide/1.7/dijit/form/Button.html

<button data-dojo-type="dijit.form.Button" id="toggleButton" onClick="toggle();" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut'" type="button">
    Click me!
</button>

2、从代码中可以看出iconClass:'dijitEditorIcon dijitEditorIconCut'就是设置图标的，找到对应的css代码，看这两个class什么意思。

3、在css文件中可以发现，它使用的是一张矢量图，然后通过移动的方式来改变图标，所以你也可以直接按照它的做法，将图标拼在一张矢量图上。

4、不参考它的写法自己写，比较easy，不过参考它的做法把公用部分的css提取出来还是不错的，如果你是一个图标，那就不用提取了。代码如下：
HTML代码片段：

 <button data-dojo-type="dijit/form/Button" 
     data-dojo-props="iconClass:'OpticalCableBearingIcon searchIcon'">
     查询
 </dbutton>
 <button data-dojo-type="dijit/form/Button" 
      data-dojo-props="iconClass:'OpticalCableBearingIcon deleteIcon'">
     删除
 </button>
 <button data-dojo-type="dijit/form/Button" 
      data-dojo-props="iconClass:'OpticalCableBearingIcon attributeIcon'">
     查看属性
 </button>
 <button data-dojo-type="dijit/form/Button" 
      data-dojo-props="iconClass:'OpticalCableBearingIcon settingIcon'">
     配置
 </button>

css代码

.OpticalCableBearingIcon {
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    text-align: center;
    background-size: cover;/*等比例放大缩小*/
}

.searchIcon {
    background-image: url("../images/searchIcon.png");
}

 .deleteIcon {
    background-image: url("../images/deleteIcon.png");
}

.attributeIcon {
    background-image: url("../images/attributeIcon.png");
}

.settingIcon {
    background-image: url("../images/settingIcon.png");
}

效果截图

友情提示：图标的话，可以上阿里矢量图标库下载，很好看的
（网址：https://www.iconfont.cn）