MenuItemIconProps

MenuItemIcon displays icons within a menu item. Ensures consistent styling and structure for icon content or nodes in MenuItem components.

import { Menu, MenuItem, MenuItemLabel, MenuItemIcon, Orientation } from '@syncfusion/react-navigations';
import { FileIcon } from '@syncfusion/react-icons';

export default function App() {
  return (
      <Menu orientation={Orientation.Horizontal} itemOnClick={false}>
          <MenuItem>
              <MenuItemLabel>Open</MenuItemLabel>
              <MenuItemIcon>
                  <FileIcon />
              </MenuItemIcon>
          </MenuItem>
      </Menu>
  );
}

import { Menu, MenuItem, MenuItemLabel, MenuItemIcon, Orientation } from '@syncfusion/react-navigations';
import { FileIcon } from '@syncfusion/react-icons';

export default function App() {
  return (
      <Menu orientation={Orientation.Horizontal} itemOnClick={false}>
          <MenuItem>
              <MenuItemLabel>Open</MenuItemLabel>
              <MenuItemIcon>
                  <FileIcon />
              </MenuItemIcon>
          </MenuItem>
      </Menu>
  );
}

Props

The following table outlines the props for the MenuItemIconProps:

Name	Type	Default	Description
children	node	-	Specifies the content of the icon. Typically an icon, a class name for custom styling or any SVG element.
className	string	-	Specifies an optional CSS class to apply to the icon container.

MenuItemIconProps

Props

Enhance your React apps with Syncfusion components today