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.
ej.base.enableRipple(true);
var dialogObj = new ej.popups.Dialog({
header: 'Delete Multiple Items',
content: "Are you sure you want to permanently delete all of these items?",
showCloseIcon: true,
buttons: [{ buttonModel: { isPrimary: true, content: 'Yes', iconCss: 'e-icons e-ok-icon' }, click: btnClick }, { buttonModel: { content: 'No', iconCss: 'e-icons e-close-icon' }, click: btnClick }],
target: document.body,
height: 'auto',
width: '300px',
animationSettings: { effect: 'Zoom' },
closeOnEscape: true
});
dialogObj.appendTo('#dialog');
document.getElementById('openBtn').onclick = function () {
dialogObj.show();
};
function btnClick() {
dialogObj.hide();
}<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Dialog button with icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="TypeScript UI Components">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body class="close-dialog">
<div id="container">
<div id="target" class="close-dialog">
<center><button id="openBtn" class="e-control e-btn">Open</button></center>
<div id="dialog"> </div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>In the following sample, dialog footer buttons are customized with icons using footerTemplate property.
ej.base.enableRipple(true);
var dialogObj = new ej.popups.Dialog({
header: 'Delete Multiple Items',
content: "Are you sure you want to permanently delete all of these items?",
showCloseIcon: true,
footerTemplate: '<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>',
target: document.body,
height: 'auto',
width: '300px',
animationSettings: { effect: 'Zoom' },
closeOnEscape: true
});
dialogObj.appendTo('#dialog');
document.getElementById('openBtn').onclick = function () {
dialogObj.show();
};
document.getElementById('Button1').onclick = function () {
dialogObj.hide();
};
document.getElementById('Button2').onclick = function () {
dialogObj.hide();
};<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Dialog button with icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="TypeScript UI Components">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body class="close-dialog">
<div id="container">
<div id="target" class="close-dialog">
<center><button id="openBtn" class="e-control e-btn">Open</button></center>
<div id="dialog"> </div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>