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 in any files?

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

VITE(TS)

src\components\Breadcrumbs.tsx

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

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

export default function Breadcrumbs() {
 ...

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

VITE(JS)

src\components\Breadcrumbs.jsx

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

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

export default function Breadcrumbs() {
 ...

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

NEXT(TS)

src\components\Breadcrumbs.tsx

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

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

export default function Breadcrumbs() {
 ...

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

NEXT(JS)

src\components\Breadcrumbs.jsx

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

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

export default function Breadcrumbs() {
 ...

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

How to add 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 dynamic icon in menu (sidebar)

VITE(TS)

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

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>
  );
}

VITE(JS)

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

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

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

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

NEXT(TS)

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

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>
  );
}

NEXT(JS)

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

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

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

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

Pass icon from menu list.

VITE(TS)

src/menu/manage.tsx

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

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

export default manage;

VITE(JS)

src/menu/manage.jsx

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

const manage = {
  id: 'group-manage',
  title: 'manage',
  icon: 'IconBrandAsana',
  type: 'group',
  children: [
    {
      ...,
      icon: 'IconLayoutGrid'
    },
    ...
  ]
};

export default manage;
7

NEXT(TS)

src/menu/manage.tsx

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

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

export default manage;

NEXT(JS)

src/menu/manage.jsx

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

const manage = {
  id: 'group-manage',
  title: 'manage',
  icon: 'IconBrandAsana',
  type: 'group',
  children: [
    {
      ...,
      icon: 'IconLayoutGrid'
    },
    ...
  ]
};

export default manage;