Icons for Dijits with the iconClass

This blog will outline several attempts I made to add an my own icon to a dijit.form.Button. At first, I tried something like this:

It ended up looking silly, and the image and text weren't aligned very well. It looks even worse in a TabContainer. Then I found the iconClass property. Unfortunately, the documentation only shows you how to use dojo's icons. It didn't look too difficult to use my own, so I tried this:

This doesn't display the icon at all! The problem is that you have to specify the dimensions of the icon in an iconClass as well, otherwise it gets rendered as a 1px by 1px image. The icons I'm using are 16px by 16px, and I intended to have multiple icons throughout my document. To implement this, I did the following:

So now I can have multiple icons without re-coding a lot of the CSS. Dojo will align everything properly, and make it look really nice if you use this method.