This appears to be a bug in the way jQuery ships.  You can fix it manually with some dom manipulation on the [`Dialog Open`][open] event:


        
    $("#selector").dialog({
        open: function() {
            $(this).closest(".ui-dialog")
            .find(".ui-dialog-titlebar-close")
            .removeClass("ui-dialog-titlebar-close")
            .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
        }
    });


[open]: http://api.jqueryui.com/dialog/#event-open

I'm using a custom jQuery 1.10.3 theme. I downloaded every straight from the theme roller and I have intentionally not changed anything.

I created a dialog box and I get an empty gray square where the close icon should be:
![Screen shot of missing close icon][img1]

I compared the code that is generated on my page:

    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <spanid="ui-id-2" class="ui-dialog-title">Title</span>
        <button class="ui-dialog-titlebar-close"></button>
    </div>

To the code generated on the [Dialog Demo page][dialogDemo]:

    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
        <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
            <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
            <span class="ui-button-text">close</span>
        </button>
    </div>

### EDIT
The different parts of the code are **generated** by jQueryUI, not me so I can't just add the span tags without editing the jqueryui js file which seems like a bad/unnecessary choice to achieve normal functionality.

Here is the JavaScript used that generates that part of the code:

    this.element.dialog({
        appendTo: "#summary_container",
        title: this.title(),
        closeText: "Close",
        width: this.width,
        position: {
            my: "center top",
            at: ("center top+"+(window.innerHeight*.1)),
            collision: "none"
        },
        modal: false,
        resizable: false,
        draggable: false,
        show: "fold",
        hide: "fold",
        close: function(){
            if(KOVM.areaSummary.isVisible()){
                KOVM.areaSummary.isVisible(false);
            }
        }
    });

I'm at a loss and need help.

  [img1]: http://i.stack.imgur.com/PjMs8.png
  [dialogDemo]: http://jqueryui.com/dialog/#default