[icons] Remove SvgIcon data-testid in production

docs/data/material/components/icons/icons.md

@@ -81,20 +81,6 @@ The Material Design guidelines name the icons using "snake_case" naming (for exa
 
 {{"demo": "SvgMaterialIcons.js"}}
 
-### Testing
-
-For testing purposes, each icon exposed from `@mui/icons-material` has a `data-testid` attribute with the name of the icon. For instance:
-
-```jsx
-import DeleteIcon from '@mui/icons-material/Delete';
-```
-
-has the following attribute once mounted:
-
-```html
-<svg data-testid="DeleteIcon"></svg>
-```
-
 ## SvgIcon
 
 If you need a custom SVG icon (not available in the [Material Icons](/material-ui/material-icons/)) you can use the `SvgIcon` wrapper.

docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md

@@ -158,3 +158,7 @@ Use this codemod to automatically update the `size` value:
 ```bash
 npx @mui/codemod@next v7.0.0/input-label-size-normal-medium <path/to/folder>
 ```
+
+### Removal of `data-testid` prop from `SvgIcon`
+
+The default `data-testid` prop has been removed from the icons in `@mui/icons-material` in production bundles. This change ensures that the `data-testid` prop is only defined where needed, reducing the potential for naming clashes and removing unnecessary properties in production.

docs/src/components/productBaseUI/MuiBaseDeprecation.tsx

@@ -37,12 +37,7 @@ export default function MuiBaseDeprecation(props: {
 function Icon() {
   return (
     <Box className="MuiCallout-icon-container">
-      <svg
-        focusable="false"
-        aria-hidden="true"
-        viewBox="0 0 24 24"
-        data-testid="ContentCopyRoundedIcon"
-      >
+      <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
         <use className="MuiCode-copied-icon" xlinkHref="#error-icon" />
       </svg>
     </Box>

packages/mui-material/src/utils/createSvgIcon.d.ts

@@ -1,3 +1,3 @@
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon from '../SvgIcon';
 
 export default function createSvgIcon(path: React.ReactNode, displayName: string): typeof SvgIcon;

packages/mui-material/src/utils/createSvgIcon.js

@@ -8,7 +8,11 @@ import SvgIcon from '../SvgIcon';
 export default function createSvgIcon(path, displayName) {
   function Component(props, ref) {
     return (
-      <SvgIcon data-testid={`${displayName}Icon`} ref={ref} {...props}>
+      <SvgIcon
+        data-testid={process.env.NODE_ENV !== 'production' ? `${displayName}Icon` : undefined}
+        ref={ref}
+        {...props}
+      >
         {path}
       </SvgIcon>
     );