diff --git a/src/layouts/Base/Menu.jsx b/src/layouts/Base/Menu.jsx
index 8542cd1d..24021a4d 100644
--- a/src/layouts/Base/Menu.jsx
+++ b/src/layouts/Base/Menu.jsx
@@ -123,12 +123,17 @@ export class LayoutMenu extends Component {
     }
   };
 
-  renderMenuItem = (item) => {
+  // eslint-disable-next-line no-unused-vars
+  renderMenuItemIcon = ({ item, collapsed, isSubMenu }) => {
+    return item.icon;
+  };
+
+  renderMenuItem = (item, isSubMenu) => {
     const { collapsed, hover } = this.state;
     if (collapsed && !hover) {
       return (
         <Menu.Item key={item.key} className={styles['menu-item-collapsed']}>
-          {item.icon}
+          {this.renderMenuItemIcon({ item, collapsed, isSubMenu })}
         </Menu.Item>
       );
     }
@@ -150,7 +155,7 @@ export class LayoutMenu extends Component {
           onClick={this.onClickMenuItem}
         >
           {/* <Menu.Item key={item.key} className={styles['menu-item-no-child']}> */}
-          {item.icon}
+          {this.renderMenuItemIcon({ item, isSubMenu })}
           <span
             className={
               item.level === 0 || (item.level === 1 && !showChildren)
@@ -171,7 +176,7 @@ export class LayoutMenu extends Component {
     }
     const title = (
       <span>
-        {item.icon}
+        {this.renderMenuItemIcon({ item })}
         <span className={styles['menu-item-title']}>
           {item.name.length >= this.maxTitleLength ? (
             <Tooltip title={item.name} placement="right">
@@ -183,7 +188,9 @@ export class LayoutMenu extends Component {
         </span>
       </span>
     );
-    const subMenuItems = item.children.map((it) => this.renderMenuItem(it));
+    const subMenuItems = item.children.map((it) =>
+      this.renderMenuItem(it, true)
+    );
 
     return (
       <SubMenu key={item.key} title={title} className={styles['sub-menu']}>