From c3d462a347f84d838582a242eb7ad9304520c86f Mon Sep 17 00:00:00 2001
From: Giang Nguyen <giang.nguyen.dev@gmail.com>
Date: Thu, 21 May 2020 11:01:21 +0700
Subject: [PATCH 1/2] [createSvgIcon] fix displayName is not display in devtool

---
 packages/material-ui/src/utils/createSvgIcon.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/material-ui/src/utils/createSvgIcon.js b/packages/material-ui/src/utils/createSvgIcon.js
index b6bd06e520c03f..13873d5f15b108 100644
--- a/packages/material-ui/src/utils/createSvgIcon.js
+++ b/packages/material-ui/src/utils/createSvgIcon.js
@@ -5,12 +5,10 @@ import SvgIcon from '../SvgIcon';
  * Private module reserved for @material-ui/x packages.
  */
 export default function createSvgIcon(path, displayName) {
-  const Component = React.memo(
-    React.forwardRef((props, ref) => (
-      <SvgIcon data-mui-test={`${displayName}Icon`} ref={ref} {...props}>
-        {path}
-      </SvgIcon>
-    )),
+  const Component = (props, ref) => (
+    <SvgIcon data-mui-test={`${displayName}Icon`} ref={ref} {...props}>
+      {path}
+    </SvgIcon>
   );
 
   if (process.env.NODE_ENV !== 'production') {
@@ -19,5 +17,5 @@ export default function createSvgIcon(path, displayName) {
 
   Component.muiName = SvgIcon.muiName;
 
-  return Component;
+  return React.memo(React.forwardRef(Component));
 }

From f871c763d3f34b8e6f810c4c6e7ac7df69ddaaff Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 25 May 2020 06:44:58 +0200
Subject: [PATCH 2/2] Document why

---
 packages/material-ui/src/utils/createSvgIcon.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/material-ui/src/utils/createSvgIcon.js b/packages/material-ui/src/utils/createSvgIcon.js
index 13873d5f15b108..ef964739eb4cc2 100644
--- a/packages/material-ui/src/utils/createSvgIcon.js
+++ b/packages/material-ui/src/utils/createSvgIcon.js
@@ -12,6 +12,8 @@ export default function createSvgIcon(path, displayName) {
   );
 
   if (process.env.NODE_ENV !== 'production') {
+    // Need to set `displayName` on the inner component for React.memo.
+    // React prior to 16.14 ignores `displayName` on the wrapper.
     Component.displayName = `${displayName}Icon`;
   }