<p dir="auto">When using a Drawer component with a ModalProps attribute, TS encounters a compile error <code class="notranslate">error TS2339: Property 'ModalProps' does not exist on type 'IntrinsicAttributes &amp; DrawerProps &amp; { children?: ReactNode; }'.</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">Drawer TS DrawerProps definitions should support using ModalProps={{...}} prop in a TS project.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Error as stated above</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import './Header.css';
import { AppBar, Toolbar, Typography, IconButton, Hidden, Drawer } from 'material-ui';
import { Menu as MenuIcon, NavigateBefore as NavigateBeforeIcon } from 'material-ui-icons';

export default () =&gt; {
  return (
    &lt;div className=&quot;Header&quot;&gt;
      &lt;AppBar position=&quot;static&quot;&gt;
        &lt;Toolbar&gt;
          &lt;IconButton className=&quot;menu&quot; color=&quot;contrast&quot; aria-label=&quot;Menu&quot;&gt;
            &lt;NavigateBeforeIcon /&gt;
          &lt;/IconButton&gt;
          &lt;Typography type=&quot;title&quot; color=&quot;inherit&quot; className=&quot;title&quot;&gt;
            Sample
          &lt;/Typography&gt;
          &lt;IconButton className=&quot;menu&quot; color=&quot;contrast&quot; aria-label=&quot;Menu&quot;&gt;
            &lt;MenuIcon /&gt;
          &lt;/IconButton&gt;
        &lt;/Toolbar&gt;
      &lt;/AppBar&gt;
      &lt;Hidden mdUp&gt;
        &lt;Drawer
          type=&quot;temporary&quot;
          anchor=&quot;right&quot;
          open={true}
          ModalProps={{
            keepMounted: true, // !---------- HERE'S THE ISSUE
          }}
        &gt;
          List stuff here
        &lt;/Drawer&gt;
      &lt;/Hidden&gt;
    &lt;/div&gt;
  );
};"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s">'./Header.css'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">AppBar</span><span class="pl-kos">,</span> <span class="pl-v">Toolbar</span><span class="pl-kos">,</span> <span class="pl-v">Typography</span><span class="pl-kos">,</span> <span class="pl-v">IconButton</span><span class="pl-kos">,</span> <span class="pl-v">Hidden</span><span class="pl-kos">,</span> <span class="pl-v">Drawer</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Menu</span> <span class="pl-k">as</span> <span class="pl-v">MenuIcon</span><span class="pl-kos">,</span> <span class="pl-v">NavigateBefore</span> <span class="pl-k">as</span> <span class="pl-v">NavigateBeforeIcon</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui-icons'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"Header"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">AppBar</span> <span class="pl-c1">position</span><span class="pl-c1">=</span><span class="pl-s">"static"</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Toolbar</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">IconButton</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"menu"</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"contrast"</span> <span class="pl-c1">aria-label</span><span class="pl-c1">=</span><span class="pl-s">"Menu"</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">NavigateBeforeIcon</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">IconButton</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Typography</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"title"</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"inherit"</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"title"</span><span class="pl-c1">&gt;</span>
            Sample
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Typography</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">IconButton</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"menu"</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"contrast"</span> <span class="pl-c1">aria-label</span><span class="pl-c1">=</span><span class="pl-s">"Menu"</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">MenuIcon</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">IconButton</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Toolbar</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">AppBar</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Hidden</span> <span class="pl-c1">mdUp</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Drawer</span>
          <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"temporary"</span>
          <span class="pl-c1">anchor</span><span class="pl-c1">=</span><span class="pl-s">"right"</span>
          <span class="pl-c1">open</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span>
          <span class="pl-c1">ModalProps</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span>
            <span class="pl-c1">keepMounted</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c">// !---------- HERE'S THE ISSUE</span>
          <span class="pl-kos">}</span><span class="pl-kos">}</span>
        <span class="pl-c1">&gt;</span>
          List stuff here
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Drawer</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Hidden</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Context</h2>
    
<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>^1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>^16.1.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 62</td>
</tr>
<tr>
<td>etc</td>
<td>Typescript@^2.6.2</td>
</tr>
</tbody>
</table>
<p dir="auto">I am trying to use the builtin material-ui-icons and I was wondering if it is possible to get the light (white) version of the material icons instead of the dark ones.</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">ability to import light version of material icons</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">cannot import</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>import material-ui-icons/Dashboard (no option to get light version)</li>
</ol>