Icons

Use the third-party library @tabler/icons-react. To view all available icons, visit the official site: Tabler Icons Documentation.

How to add icons to any files?

Note: Ensure each icon you use is imported at the top of the file.

Breadcrumbs.tsx

// @assets
import { IconChevronRight } from '@tabler/icons-react';

/***************************  BREADCRUMBS  ***************************/

export default function Breadcrumbs({ data }: { data?: NavItemType[] }) {
 ...

  return (
    <MuiBreadcrumbs aria-label="breadcrumb" separator={<IconChevronRight size={16} />}>
      ...
    </MuiBreadcrumbs>
  );

How to add a dynamic icon?

Create a common component for rendering dynamic icons, named DynamicIcon.tsx, located in the folder path src/components/.

Props Details

Prop	Type	Description
name	keyof typeof TablerIcons	Use icon name from Tabler library e.g., IconLayoutGrid
size	number (Optional)	Sets the size of the icon. Pass a numeric value to adjust the icon's width and height proportionally.
color	string (Optional)	Defines the color of the icon.
stroke	number (Optional)	Sets the stroke width of the icon's lines. Adjust this value to make the lines thicker or thinner.

Add a dynamic icon in the menu (sidebar)

src/layouts/AdminLayout/Drawer/DrawerContent/MiniDrawer/NavItem.tsx

/***************************  LIST ITEM BUTTON - STYLE  ***************************/


interface Props {
  item: NavItemType;
  level?: number;
}

/***************************  MINI DRAWER - ITEM  ***************************/

export default function NavItem({ item, level = 0 }: Props) {
 ...

  return (
    ...
    
              <DynamicIcon
                name={item.icon as DynamicIconProps['name']}
                size={22}
                stroke={1.5}
                color={isSelected ? theme.palette.text.primary : theme.palette.text.secondary}
              />
           ...
      )}
      ...
    </ListItemButton>
  );
}

Pass icon from the menu list.

src/menu/manage/tsx

/***************************  MENU ITEMS - APPLICATIONS  ***************************/

const manage: NavItemType = {
  id: 'group-manage',
  title: <FormattedMessage id="manage" />,
  icon: 'IconBrandAsana',
  type: 'group',
  children: [
    {
      ...,
      icon: 'IconLayoutGrid'
    },
    ...
  ]
};

export default manage;