title: Material-UI: How to declare a type for React.ComponentType<P> with typescript
body: <p>I am using Typescript and <a href="https://github.com/mui-org/material-ui" rel="noreferrer">Material-UI</a> I want to declare the component type for a variable like this</p>
  
  <pre><code>import MoreVert from '@material-ui/icons/MoreVert'
  import { SvgIconProps } from '@material-ui/core/SvgIcon';
  
  let myIcon: SvgIconProps = &lt;MoreVert /&gt;; // does not work
  </code></pre>
  
  <p>But I am getting the error:</p>
  
  <pre><code>[ts]
  Type 'Element' is not assignable to type 'SvgIconProps'.
    Types of property 'type' are incompatible.
      Type 'string | ComponentClass&lt;any&gt; | StatelessComponent&lt;any&gt;' is not assignable to type 'string'.
        Type 'ComponentClass&lt;any&gt;' is not assignable to type 'string'.
  </code></pre>
  
  <p><a href="https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/SvgIcon/SvgIcon.d.ts" rel="noreferrer">This is how the SvgIcon.ts</a> looks like. What am I doing wrong? </p>
  
  <pre><code>import * as React from 'react';
  import { StandardProps, PropTypes } from '..';
  
  export interface SvgIconProps
    extends StandardProps&lt;React.SVGProps&lt;SVGSVGElement&gt;, SvgIconClassKey&gt; {
    color?: PropTypes.Color | 'action' | 'disabled' | 'error';
    component?: React.ReactType&lt;SvgIconProps&gt;;
    fontSize?: 'inherit' | 'default' | 'small' | 'large';
    nativeColor?: string;
    titleAccess?: string;
    viewBox?: string;
  }
  
  export type SvgIconClassKey =
    | 'root'
    | 'colorSecondary'
    | 'colorAction'
    | 'colorDisabled'
    | 'colorError'
    | 'colorPrimary'
    | 'fontSizeInherit'
    | 'fontSizeSmall'
    | 'fontSizeLarge';
  
  declare const SvgIcon: React.ComponentType&lt;SvgIconProps&gt;;
  
  export default SvgIcon;
  </code></pre>