HelpBot Assistant

How can I help you?

Icons in React Drop down button component

2 Mar 202613 minutes to read

Display an icon in the DropDownButton using the iconCss property. Set the property to e-icons along with the desired icon CSS class. By default, icons appear on the left side of the button text. Customize the icon position using the iconPosition property.

The following example demonstrates DropDownButtons with default and Top icon positions:

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
    let items = [
        {
            text: 'Edit',
        },
        {
            text: 'Delete',
        },
        {
            text: 'Mark as Read',
        },
        {
            text: 'Like Message',
        }
    ];
    return (<div>
        <DropDownButtonComponent items={items} iconCss='ddb-icons e-message'> Message </DropDownButtonComponent>
        <DropDownButtonComponent items={items} iconCss='ddb-icons e-message' iconPosition='Top'> Message </DropDownButtonComponent>
         </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {
  let items: ItemModel[] = [
    {
        text: 'Edit',
    },
    {
        text: 'Delete',
    },
    {
        text: 'Mark as Read',
    },
    {
        text: 'Like Message',
    }];
    return (
      <div>
        <DropDownButtonComponent items = {items}  iconCss='ddb-icons e-message'> Message </DropDownButtonComponent>
        <DropDownButtonComponent items = {items}  iconCss='ddb-icons e-message' iconPosition = 'Top'> Message </DropDownButtonComponent>
         </div>
      );
  }
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Icon-only DropDownButton

Create an icon-only DropDownButton by using the iconCss property and hiding the dropdown caret with the e-caret-hide class through the cssClass property.

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
    let items = [
        {
            text: 'New tab'
        },
        {
            text: 'New window'
        },
        {
            text: 'New incognito window'
        },
        {
            separator: true
        },
        {
            text: 'Print'
        },
        {
            text: 'Cast'
        },
        {
            text: 'Find'
        }
    ];
    return (<div>
        <DropDownButtonComponent items={items} iconCss='e-icons e-menu' cssClass='e-caret-hide'></DropDownButtonComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {
  let items: ItemModel[] = [
    {
        text: 'New tab'
    },
    {
        text: 'New window'
    },
    {
        text: 'New incognito window'
    },
    {
        separator: true
    },
    {
        text: 'Print'
    },
    {
        text: 'Cast'
    },
    {
        text: 'Find'
    }];

    return (
      <div>
        <DropDownButtonComponent items = {items} iconCss='e-icons e-menu' cssClass= 'e-caret-hide'></DropDownButtonComponent>
      </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Use sprite images as button icons by applying the iconCss property. The following example uses the e-image class with background positioning. Set the element’s width and height to 32px to properly display the sprite image.

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
    let items = [
        {
            text: 'Display Settings'
        },
        {
            text: 'System Settings'
        },
        {
            text: 'Additional Settings'
        }
    ];
    return (<div>
      <DropDownButtonComponent items={items} iconCss='e-icons e-image' cssClass='e-caret-hide'/>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {
  let items: ItemModel[] = [
    {
        text: 'Display Settings'
    },
    {
        text: 'System Settings'
    },
    {
        text: 'Additional Settings'
    }];

  return (
    <div>
      <DropDownButtonComponent items = {items} iconCss='e-icons e-image' cssClass= 'e-caret-hide'/>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Syncfusion provides a set of icons available through the e-icons class. You can also integrate third-party icons using the iconCss property.

Vertical button

Create a vertical DropDownButton layout by adding the e-vertical class using the cssClass property. This orientation positions the button icon above the text.

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
    let items = [
        {
            text: 'Edit'
        },
        {
            text: 'Delete'
        },
        {
            text: 'Mark as Read'
        },
        {
            text: 'Like Message'
        }
    ];
    return (<div>
      <DropDownButtonComponent items={items} iconCss='ddb-icons e-message' cssClass='e-vertical' iconPosition='Top'> Message </DropDownButtonComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {
  let items: ItemModel[] = [
    {
        text: 'Edit'
    },
    {
        text: 'Delete'
    },
    {
        text: 'Mark as Read'
    },
    {
        text: 'Like Message'
    }];

    return (
    <div>
      <DropDownButtonComponent items = {items} iconCss='ddb-icons e-message' cssClass= 'e-vertical' iconPosition='Top'> Message </DropDownButtonComponent>
      </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

The Essential® JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element. You can also use third party icons on the DropDownButton using the iconCss property.

See Also