Icons in React Drop down button component

7 Aug 202313 minutes to read

DropDownButton icons

DropDownButton can have an icon to provide the visual representation of the action. To place the icon on a DropDownButton, set the iconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the DropDownButton. You
can customize the icon’s position by using the iconPositionproperty.

In the following example, the DropDownButton with default iconPosition and iconPosition as Top is showcased.

app.jsx
app.tsx
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

Icon only DropDownButton can be achieved by using iconCss property and to hide drop down arrow
e-caret-hide class is added using cssClass property.

app.jsx
app.tsx
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'));

DropDownButton with sprite image

Sprite images can be loaded in DropDownButton instead of font icons using iconCss property.

In this following example, e-image class is added with background url of the sprite image along with X and Y positions. The width and height of the element set as 32px.

app.jsx
app.tsx
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'));

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.

Vertical button

Vertical Button in DropDownButton can be achieved by adding e-vertical class using cssClass property.

app.jsx
app.tsx
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'));