You can render icons to the list items by mapping the
iconCss
field. This iconCss field create a span in the list item with mapped class name
to allow styling as per your need.
In the following sample, icon classes are mapped with iconCss field.
var sortFormatData = [
{ Class: 'asc-sort', Type: 'Sort A to Z', Id: '1' },
{ Class: 'dsc-sort', Type: 'Sort Z to A ', Id: '2' },
{ Class: 'filter', Type: 'Filter', Id: '3' },
{ Class: 'clear', Type: 'Clear', Id: '4' }
];
//initiates the component
var sortFormat = new ej.dropdowns.DropDownList({
//set the data to dataSource property
dataSource: sortFormatData,
// map the icon column to iconCSS field.
fields: { value: 'Type', iconCss: 'Class' },
// set placeholder to DropDownList input element
placeholder: 'Find a format'
});
sortFormat.appendTo('#ddlelement');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 DropDownList</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="margin:0 auto; width:250px;">
<br>
<input type="text" id="ddlelement">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>