Adding icons to buttons on a jQuery dialog

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/cupertino/jquery-ui.css">
<div><span><input type="button" class="MaterialEdit" value="Click here to open dialog" /></span></div>
<div class="dialog">
    <table>
        <tbody>
            <tr>
                <td>Tables should only be for tabular data!!</td>
                <td>Buttons</td>
            </tr>
            <tr>
                <td>Row 1</td>
                <td>
                    <button class="MaterialPackingEdit">Button 1</button>
                    <button class="MaterialPackingRemove">Button 2</button>
                </td>
            </tr>
            <tr>
                <td>Row 2</td>
                <td>
                    <button class="MaterialPackingEdit">Button 1</button>
                    <button class="MaterialPackingRemove">Button 2</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

body {
    padding:3px;
    font-size: smaller;
}
.dialog{ 
    display:none; 
}
td button{
    /* display: inline !important; */
}
table{
    border-collapse:collapse;
}
td{
    padding: 3px;
    border: #999 0.1em solid;
}

JavaScript

$(function() {
    var onDialogOpen = function(event, ui) {
            $('.MaterialPackingEdit').button({
                icons: {
                    primary: "ui-icon-pencil"
                },
                text: false
            });
            $('.MaterialPackingRemove').button({
                icons: {
                    primary: "ui-icon-plus"
                },
                text: false
            });
        };
    $('.dialog').dialog({
        autoOpen: false,
        title:'Buttons As Icons on a jQuery Dialog',
        width: 400,
        open: onDialogOpen
    });
    $('.MaterialEdit').click(function() {
        $('.dialog').dialog('open');
    });
});