Having trouble getting help?
Contact Support
Contact Support
Icons support in React Drop down list component
25 Mar 20255 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 { DropDownListComponent } 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
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' }
];
// map the icon column to iconCSS field.
fields = { text: 'Type', iconCss: 'Class', value: 'Id' };
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" dataSource={this.sortFormatData} fields={this.fields} placeholder="Select a format"/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { DropDownListComponent } 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 DropDownList component
<DropDownListComponent id="ddlelement" dataSource={this.sortFormatData} fields={this.fields} placeholder="Select a format" />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
.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;
}