JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div id="dialog"></div>

CSS

.ui-dialog-title .ui-icon {
    display: inline-block;
}

JavaScript

$.widget( "ui.dialog", $.ui.dialog, {
    options: {
        headerIcon: null
    },
    _setHeaderIcon: function() {
        var title;
        if ( this.options.headerIcon ) {
            title = this.uiDialogTitlebar
                .find( ".ui-dialog-title" );
            title.find( "span" ).remove();
            title.prepend( "<span class='ui-icon "
                    + this.options.headerIcon + "'></span>" );    
        }        
    },
    _create: function() {
        this._super();
        this._setHeaderIcon();
    },
    _setOption: function( key, value ) {
        this._super( key, value );
        if ( key === "headerIcon" ) {
            this._setHeaderIcon();
        }
    }
});

$( "#dialog" ).dialog({
    headerIcon: "ui-icon-star",
    title: "Lorem Ipsum"
}).dialog( "option", "headerIcon", "ui-icon-heart" );