jquery.ui dialog button with a icon

I am looking to have a button from a jquery.ui with a icon.

My preferance is fontawsone, but I suppose bootstrap ones are ok.

So, say this markup:

        <asp:Button ID="cmdTest" runat="server" Text="Test Dialog"
            CssClass="btn"
            OnClientClick="testdialog();return false;" />


        <div id="fundialog" style="display:none">
            <h3>This is a test dialog</h3>
            <i class="fa fa-check-circle" aria-hidden="true"></i> Ok icon wanted
            <br />
            <i class="fa fa-times-circle" aria-hidden="true"></i> Cancel icon wanted
        </div>
        <br />
        testing:<br />
         <h4><i class="fa fa-car" aria-hidden="true"></i> Fa Car icon</h4>

    <script>

        function testdialog() {

            var myDialog = $("#fundialog")
            myDialog.dialog({
                autoOpen: false,
                modal: true,
                closeText: "",
                title: "My title Text",
                appendTo: "form",
                buttons: [
                    {
                        id: "MyOkBtn",
                        text: 'Ok',
                        class:'MyOkBtn',
                        click: function () {
                            myDialog.dialog('close')
                            myDialog.dialog('destroy');
                            btn.click()
                        }
                    },
                    {
                        id: "MyCancel",
                        text: "Cancel",
                        click: function () {
                            myDialog.dialog('close')
                            myDialog.dialog('destroy');
                        }
                    }
                ]
            })
            myDialog.dialog('open')

        }
    </script>

And the result is this:

However, as noted, I want a button with a icon.

I have attempted this:

                buttons: [
                    {
                        id: "MyOkBtn",
                        text: '<i class="fa fa-check-circle" aria-hidden="true"></i>Ok',
                        click: function () {
                            myDialog.dialog('close')
                            myDialog.dialog('destroy');
                            btn.click()
                        }
                    },

but, result is this:

So, looking for a button, but a button with a icon from font awsome.

I suppose I am open to downloading a svg from boostrap ions, or even the fontawsome, and using a background image for the button.

So it does not look like jquery.ui buttons support any kind of button icon or image (other then some very old ugly ones that look like they came from windows 3.1 era).

While I am using asp.net here (web forms), it basic markup, jquery, jquery.ui.

I'm also open to modifying the jquery.ui css files, but they are quite long, and doing so would prevent future upgrades with any much ease.

There is also the looming issue of hover highlights, and the image color not changing, but hey, one step at a time!

Consider using the built in UI Icons:

$(function() {
  var myDialog = $("#fundialog").dialog({
    autoOpen: false,
    modal: true,
    title: "My title Text",
    buttons: [{
        id: "MyOkBtn",
        text: 'Ok',
        icon: "ui-icon-circle-check",
        class: 'MyOkBtn',
        click: function() {
          myDialog.dialog('close')
          myDialog.dialog('destroy');
          btn.click()
        }
      },
      {
        id: "MyCancel",
        text: "Cancel",
        icon: "ui-icon-circle-close",
        click: function() {
          myDialog.dialog('close')
          myDialog.dialog('destroy');
        }
      }
    ]
  });

  $(".btn").click(function() {
    myDialog.dialog("open");
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<button class="btn">Test Dialog</button>


<div id="fundialog">
  <h3>This is a test dialog</h3>
  <i class="fa fa-check-circle" aria-hidden="true"></i> Ok icon wanted
  <br />
  <i class="fa fa-times-circle" aria-hidden="true"></i> Cancel icon wanted
</div>
<br /> testing:
<br />
<h4><i class="fa fa-car" aria-hidden="true"></i> Fa Car icon</h4>

You can use ID or Classes to make use of your own Icons too.

$(function() {
  var myDialog = $("#fundialog").dialog({
    autoOpen: false,
    modal: true,
    title: "My title Text",
    buttons: [{
        id: "MyOkBtn",
        text: 'Ok',
        class: "ui-state-default",
        click: function() {
          myDialog.dialog('close').dialog('destroy');
          btn.click();
        }
      },
      {
        id: "MyCancelBtn",
        text: "Cancel",
        click: function() {
          myDialog.dialog('close').dialog('destroy');
        }
      }
    ],
    create: function(e, ui) {
      $("<i>", {
        class: "fa fa-check-circle"
      }).prependTo("#MyOkBtn");
      $("<i>", {
        class: "fa fa-times-circle"
      }).prependTo("#MyCancelBtn");
    }
  });

  $(".btn").click(function() {
    myDialog.dialog("open");
  });
});

.ui-dialog .ui-dialog-buttonset i {
  margin-right: 3px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<button class="btn">Test Dialog</button>


<div id="fundialog">
  <h3>This is a test dialog</h3>
  <i class="fa fa-check-circle" aria-hidden="true"></i> Ok icon wanted
  <br />
  <i class="fa fa-times-circle" aria-hidden="true"></i> Cancel icon wanted
</div>
<br /> testing:
<br />
<h4><i class="fa fa-car" aria-hidden="true"></i> Fa Car icon</h4>

This method makes use of the create callback to modify the buttons and add the FontAwesome Icons.