How to show list items with icons in EJ2 JavaScript Dropdown List

4 Sep 20265 minutes to read

You can render icons to the list items by mapping the iconCss field. This iconCss field creates a span in the list item with the mapped class name to allow styling as per your requirement.

In the following sample, icon classes are mapped to the 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="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet"> 
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
    <style>
        .e-list-icon{
            line-height: 1.3;
            padding-right: 10px;
            text-indent: 5px;
        }
        .asc-sort:before {
            content: '\ea91';
            font-family: 'e-icons';  
            font-size: 20px;

        }
        .dsc-sort:before {
            content: '\ea98';
            font-family: 'e-icons';   
            font-size: 20px;
        }
        .filter:before {
            content: '\ea77';
            font-family: 'e-icons';  
            font-size: 20px;
            opacity: 0.78;
        }
        .clear:before {
            content: '\ec0f';
            font-family: 'e-icons';  
            font-size: 20px;
        }
    </style>
</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>