[materia-ui][StepIcon] Add SvgIconOwnProps type to StepIcon props (#44337)

Author: sai6855

docs/pages/material-ui/api/step-icon.json

@@ -55,7 +55,7 @@
   "muiName": "MuiStepIcon",
   "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/mui-material/src/StepIcon/StepIcon.js",
-  "inheritance": null,
+  "inheritance": { "component": "SvgIcon", "pathname": "/material-ui/api/svg-icon/" },
   "demos": "<ul><li><a href=\"/material-ui/react-stepper/\">Stepper</a></li></ul>",
   "cssComponent": false
 }

packages/mui-material/src/StepIcon/StepIcon.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps } from '..';
+import { InternalStandardProps as StandardProps, SvgIconOwnProps } from '..';
 import { Theme } from '../styles';
 import { StepIconClasses } from './stepIconClasses';
 
 export interface StepIconProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  // TODO v7: extend React.HTMLAttributes<SVGSVGElement> as svg is root component of StepIcon not div
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'color' | 'children'>,
+    Omit<SvgIconOwnProps, 'children'> {
   /**
    * Whether this step is active.
    * @default false
@@ -46,5 +48,6 @@ export type StepIconClasskey = keyof NonNullable<StepIconProps['classes']>;
  * API:
  *
  * - [StepIcon API](https://mui.com/material-ui/api/step-icon/)
+ * - inherits [SvgIcon API](https://mui.com/material-ui/api/svg-icon/)
  */
 export default function StepIcon(props: StepIconProps): React.JSX.Element;

packages/mui-material/src/StepIcon/StepIcon.spec.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import StepIcon from '@mui/material/StepIcon';
+
+<StepIcon icon={<div>icon</div>} />;
+<StepIcon icon={<div>icon</div>} titleAccess="title" />;

packages/mui-material/src/StepIcon/StepIcon.test.js

@@ -2,14 +2,15 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
 import StepIcon, { stepIconClasses as classes } from '@mui/material/StepIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 import describeConformance from '../../test/describeConformance';
 
 describe('<StepIcon />', () => {
   const { render } = createRenderer();
 
   describeConformance(<StepIcon icon={1} />, () => ({
     classes,
-    inheritComponent: 'svg',
+    inheritComponent: SvgIcon,
     render,
     muiName: 'MuiStepIcon',
     testVariantProps: { completed: true },