Use jQuery UI Icons in jQuery UI Button

The jQuery UI themes provides many icons which you can use for any purpose. You can display them in jQuery UI buttons as well. To use them, all you need to provide is the class name.

The jQuery UI Button widget has icons settings to display icons. You can display 2 different icons.
The primary icon is displayed by default on the left of the label text. And the secondary by default is on the right. Value for the primary and secondary properties must be a classname (String), eg. "ui-icon-gear".

For using only one icon: icons: {primary:'ui-icon-locked'}.
And for using two icons: icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}

$("#btnDemo").button({         icons: {             primary: "ui-icon-locked",             secondary: "ui-icon-unlocked"         }     }); 

See result below

See Complete Code

Now the question is that how do you remember these icons class name? And for your information, the jQuery UI theme provides more than 150+ icons which I can't list here and it is difficult to remember.

The way to figure out the name of the icon is to visit jQuery UI ThemeRollar. And you can find the all of the icons listed in a grid at bottom of the page. Take your mouse on the icon to see the class name.

Take a note that the class name starts with a dot(.). For example, if you take mouse on the heart icon then the class name is ".ui-icon-heart", but while using it in code remove the starting dot(.) and use it like "ui-icon-heart". See the code in demo.

Feel free to contact me for any help related to jQuery, I will gladly help you.