JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://raw.github.com/alexeevdv/jquery-ui/master/ui/jquery.ui.core.js"></script>
<script src="https://raw.github.com/alexeevdv/jquery-ui/master/ui/jquery.ui.widget.js"></script>
<script src="https://raw.github.com/alexeevdv/jquery-ui/master/ui/jquery.ui.button.js"></script>
<script src="https://raw.github.com/alexeevdv/jquery-ui/dialog-title-custom-icon/ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/redmond/jquery-ui.css" type="text/css" media="all" />
<style>
* { font-size: 13px; }
.ui-dialog .ui-dialog-titlebar-icon {
position: absolute;
top: 50%;
left: 0.3em;
margin: -8px 0 0 0;
}
.ui-dialog .ui-dialog-titlebar-icon-spacer {
width: 16px;
height: 16px;
display: block;
float: left;
margin-left: -0.3em;
}
</style>
</head>
<body>
<div id="dialog" title="Dialog with icon">
Hello world!
</div>
</body>
</html>
JavaScript
$(function() {
$("#dialog").dialog({
icon: "ui-icon-folder-open",
width: 400,
height: 200,
modal: true,
buttons: [
{
text: "Set gear icon",
click: function() {
$(this).dialog("option", "icon", "ui-icon-gear");
}
},
{
text: "Set image icon",
click: function() {
$(this).dialog("option", "icon", "ui-icon-image");
}
},
{
text: "Get icon",
click: function() {
alert($(this).dialog("option", "icon"));
}
}
]
});
});