Add an icons to Dialog buttons in ASP.NET Core Dialog control

<div class="col-lg-12 control-section" id="target">
    <ejs-button id="normalbtn" content="Open"></ejs-button>
    <ejs-dialog id="dialog" width="400px" target="#target" Content="Are you sure you want to permanently delete all of these items?"
                showCloseIcon="true" header="Delete Multiple Items">
        <e-dialog-animationsettings effect="Zoom"></e-dialog-animationsettings>
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="ViewBag.DefaultButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="ViewBag.DefaultButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
</div>
<style>
    .control-section {
        padding-left: 10px;
    }

    .control-section {
        padding-left: 10px;
    }

    #target {
        height: 100%;
        min-height: 350px;
    }

    .e-ok-icon::before {
        content: '\e7ff';
    }

    .e-close-icon::before {
        content: '\e825';
    }
</style>
<script>
    document.getElementById('normalbtn').onclick = function () {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.show();
    };
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>

public class HomeController : Controller
{
    public class ButtonModel
    {
        public string content { get; set; }
        public bool isPrimary { get; set; }
        public string iconCss { get; set; }

    }

    public ActionResult Index()
    {
        ViewBag.DefaultButtons1 = new ButtonModel() { content = "YES", isPrimary = true, iconCss = "e-icons e-ok-icon" };
        ViewBag.DefaultButtons2 = new ButtonModel() { content = "NO", iconCss = "e-icons e-close-icon" };
        return View();
    }
}

<div class="col-lg-12 control-section" id="target">
    <ejs-button id="normalbtn" content="Open"></ejs-button>
    <ejs-dialog id="dialog" created="onLoad" width="400px" target="#target" Content="Are you sure you want to permanently delete all of these items?"
                showCloseIcon="true" header="Delete Multiple Items" footerTemplate="<div><button id='Button1' class='e-control e-btn e-primary e-flat' data-ripple='true'><span class='e-btn-icon e-icons e-ok-icon e-icon-left'></span>Yes</button><button id='Button2' class='e-control e-btn e-flat' data-ripple='true'><span class='e-btn-icon e-icons e-close-icon e-icon-left'></span>No</button></div>">
        <e-dialog-animationsettings effect="Zoom"></e-dialog-animationsettings>
    </ejs-dialog>
</div>
<style>
    .control-section {
        padding-left: 10px;
    }

    .control-section {
        padding-left: 10px;
    }

    #target {
        height: 100%;
        min-height: 350px;
    }

    .e-ok-icon::before {
        content: '\e7ff';
    }

    .e-close-icon::before {
        content: '\e825';
    }
</style>

<script>
    var dialogObj;
    document.getElementById('normalbtn').onclick = function () {
        dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.show();
    };
    function onLoad() {
        dialogObj = document.getElementById('dialog').ej2_instances[0];
        document.getElementById('Button1').onclick = function () {
            dialogObj.hide();
        };
        document.getElementById('Button2').onclick = function () {
            dialogObj.hide();
        };
    }
</script>

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}