<p dir="auto">I am experiencing an issue with the Material UI Icons (SVG) with typescript.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I expect the following code to generate the menu icon inside of a div:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import MenuIcon from 'material-ui-icons/Menu';

const styles = (theme: any): any =&gt; ({ ... styles ... });

class ExampleComponent extends React.Component&lt;any, any&gt; {
  render() {
    return (
      &lt;div&gt;
        &lt;MenuIcon /&gt;
      &lt;/div&gt;
    );
}

export default withStyles(styles)(ExampleComponent);"><pre class="notranslate"><code class="notranslate">import * as React from 'react';
import MenuIcon from 'material-ui-icons/Menu';

const styles = (theme: any): any =&gt; ({ ... styles ... });

class ExampleComponent extends React.Component&lt;any, any&gt; {
  render() {
    return (
      &lt;div&gt;
        &lt;MenuIcon /&gt;
      &lt;/div&gt;
    );
}

export default withStyles(styles)(ExampleComponent);
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">This code instead generates the following error on <code class="notranslate">MenuIcon</code> (or any icon added):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ts]
JSX element type 'Menu' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Menu'.
import MenuIcon"><pre class="notranslate"><code class="notranslate">[ts]
JSX element type 'Menu' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Menu'.
import MenuIcon
</code></pre></div>
<p dir="auto">Also in the browser it displays the following:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Failed to compile
...\my-app\node_modules\material-ui-icons\Menu.d.ts
(2,35): error TS2507: Type 'ComponentType&lt;SvgIconProps &amp; StyledComponentProps&lt;&quot;root&quot;&gt;&gt;' is not a constructor function type.
This error occurred during the build time and cannot be dismissed."><pre class="notranslate"><code class="notranslate">Failed to compile
...\my-app\node_modules\material-ui-icons\Menu.d.ts
(2,35): error TS2507: Type 'ComponentType&lt;SvgIconProps &amp; StyledComponentProps&lt;"root"&gt;&gt;' is not a constructor function type.
This error occurred during the build time and cannot be dismissed.
</code></pre></div>
<p dir="auto">When I remove the menu icon the app works as expected.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Create an app with a typescript create react app wrapper:<br>
<a href="https://github.com/wmonk/create-react-app-typescript">https://github.com/wmonk/create-react-app-typescript</a></li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="create-react-app testing-material-ui-icon-error-typescript --scripts-version=react-scripts-ts
cd testing-material-ui-icon-error-typescript/"><pre class="notranslate"><code class="notranslate">create-react-app testing-material-ui-icon-error-typescript --scripts-version=react-scripts-ts
cd testing-material-ui-icon-error-typescript/
</code></pre></div>
<ol start="2" dir="auto">
<li>
<p dir="auto">Add material-ui and material-ui-icons:<br>
<code class="notranslate">yarn add material-ui material-ui-icons</code> || <code class="notranslate">npm install material-ui material-ui-icons</code></p>
</li>
<li>
<p dir="auto">Start the server:<br>
<code class="notranslate">yarn start</code> || <code class="notranslate">npm start</code></p>
</li>
<li>
<p dir="auto">Add the menu icon into the default /src/App.tsx:</p>
</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import * as React from &quot;react&quot;;
import &quot;./App.css&quot;;
import MenuIcon from &quot;material-ui-icons/Menu&quot;;
const logo = require(&quot;./logo.svg&quot;);

class App extends React.Component {
  render() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;App-header&quot;&gt;
          &lt;MenuIcon /&gt;
          &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
          &lt;h2&gt;Welcome to React&lt;/h2&gt;
        &lt;/div&gt;
        &lt;p className=&quot;App-intro&quot;&gt;
          To get started, edit &lt;code&gt;src/App.tsx&lt;/code&gt; and save to reload.
        &lt;/p&gt;
      &lt;/div&gt;
    );
  }
}

export default App;"><pre class="notranslate"><code class="notranslate">import * as React from "react";
import "./App.css";
import MenuIcon from "material-ui-icons/Menu";
const logo = require("./logo.svg");

class App extends React.Component {
  render() {
    return (
      &lt;div className="App"&gt;
        &lt;div className="App-header"&gt;
          &lt;MenuIcon /&gt;
          &lt;img src={logo} className="App-logo" alt="logo" /&gt;
          &lt;h2&gt;Welcome to React&lt;/h2&gt;
        &lt;/div&gt;
        &lt;p className="App-intro"&gt;
          To get started, edit &lt;code&gt;src/App.tsx&lt;/code&gt; and save to reload.
        &lt;/p&gt;
      &lt;/div&gt;
    );
  }
}

export default App;
</code></pre></div>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">Windows 10<br>
Node 8.5.0<br>
NPM 5.3.0</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.13</td>
</tr>
<tr>
<td>Material-UI-Icons</td>
<td>1.0.0-beta.14</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
</tbody>
</table>
<p dir="auto">Thank you for your time!</p>
<p dir="auto">I am trying to create a Menu but is getting the following warning.  <code class="notranslate">React does not recognize the</code>anchorEl<code class="notranslate"> prop on a DOM element</code></p>
<ul dir="auto">
<li>[ x] I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">No Warning</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Warning</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><code class="notranslate">&lt;Menu id="simple-menu" anchorEl={plusAnchorElem} &gt; &lt;/Menu&gt;</code></p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>^0.20.0</td>
</tr>
<tr>
<td>React</td>
<td>^16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>