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 { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the array of data
private 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' }
];
// map the icon column to iconCSS field.
private fields: object = { text: 'type', iconCss: 'class', value: 'id' };
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="mtselement" dataSource={this.sortFormatData} fields={this.fields} placeholder="Select a format" />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/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>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>.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;
}