How to add icons to Dialog buttons in ASP.NET MVC Dialog

20 Aug 20265 minutes to read

You can add icons to the dialog buttons using the Buttons property or FooterTemplate property . For detailed information about dialog buttons, refer to the documentation section.

In the following sample, dialog footer buttons are customized with icons using Buttons property.

@using Syncfusion.EJ2.Popups

<div id="target" class="col-lg-12 control-section">
    @Html.EJS().Button("normalbtn").Content("Open").Render()
    @Html.EJS().Dialog("dialog").AnimationSettings(a=>a.Effect(DialogEffect.Zoom)).Header("Delete Multiple Items").Content("Are you sure you want to permanently delete all of these items?").ShowCloseIcon(true).CloseOnEscape(true).Width("500px").Target("#target").Buttons(btn=> {
        btn.Click("dlgButtonClick").ButtonModel(ViewBag.DefaultButtons1).Add();
        btn.Click("dlgButtonClick").ButtonModel(ViewBag.DefaultButtons2).Add();
    }).Render()
</div>

<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>
<style>
    .control-section {
        padding-left: 10px;
    }

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

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

    .e-close-icon::before {
        content: '\e825';
    }
</style>
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();
    }
}

Output be like the below.

dialog

In the following sample, dialog footer buttons are customized with icons using FooterTemplate property.

@using Syncfusion.EJ2.Popups

<div id="target" class="col-lg-12 control-section">
    @Html.EJS().Button("normalbtn").Content("Open").Render()
    @Html.EJS().Dialog("dialog").Created("onLoad").AnimationSettings(a => a.Effect(DialogEffect.Zoom)).Header("Delete Multiple Items").Content("Are you sure you want to permanently delete all of these items?").ShowCloseIcon(true).CloseOnEscape(true).Width("500px").Target("#target").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>").Render()
</div>
<script>
    var dialogObj = document.getElementById('dialog').ej2_instances[0];
    document.getElementById('normalbtn').onclick = function () {
        dialogObj.show();
    };
    function onLoad() {
        document.getElementById('Button1').onclick = function () {
            dialogObj.hide();
        };
        document.getElementById('Button2').onclick = function () {
            dialogObj.hide();
        };
    }
</script>
<style>
    .control-section {
        padding-left: 10px;
    }

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

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

    .e-close-icon::before {
        content: '\e825';
    }
</style>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Output be like the below.

dialog