Using icons in the dialog title

With some dialogs, depending on the nature of the application and the content of the dialog itself, it may be beneficial to place an icon beside the dialog title. This could be beneficial in the sense that it provides additional context to the user. For example, an edit dialog might have a pencil icon, whereas a user profile dialog might contain a person icon.

Getting ready...

To illustrate adding an icon to the title bar of the dialog widget, we'll use the following as our basic HTML:

<div id="dialog" title="Edit">
    <div>
        <label>Field 1:</label>
        <input type="text"/>
    </div>
    <div>
        <label>Field 2:</label>
        <input type="text"/>
    </div>
</div>

How to do it...

The first thing we'll need to define is a custom CSS class used to properly align the icon once we place it in the title bar of the dialog. The CSS looks like this:

.ui-dialog-icon {
    float: left...