Add Icons to Buttons in Dialog Component

4 Apr 20226 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.

<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();
    }
}

dialog

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

<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();
    }
}

dialog