Icons support in EJ2 TypeScript Drop down list control

23 Jun 20235 minutes to read

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.

import { DropDownList } from '@syncfusion/ej2-dropdowns';
let sortFormatData: { [key: string]: Object }[] = [
    { 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' }
];

let sortFormat: DropDownList = new DropDownList({
    dataSource: sortFormatData,
    // map the icon column to iconCSS field.
    fields: { text: 'Type', iconCss: 'Class', value: 'Id' },
    placeholder: 'Select 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/32.1.19/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="margin:0 auto; width:250px;">
        <br>
        <input type="text" id='ddlelement' />
    </div>
</body>

</html>