<p dir="auto">How to apply to material-ui-icons global MuiSvgIcon styles from the theme</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">The MuiSvgIcon should override in theme both simple SvgIcon with path, and material ui icons, but overrides only SvgIcon</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import SvgIcon from 'material-ui-next/SvgIcon'
import Add from 'material-ui-icons/Add'"><pre class="notranslate"><code class="notranslate">import SvgIcon from 'material-ui-next/SvgIcon'
import Add from 'material-ui-icons/Add'
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;SvgIcon&gt;
    &lt;path d=&quot;M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z&quot; /&gt;
  &lt;/SvgIcon&gt;"><pre class="notranslate"><code class="notranslate">&lt;SvgIcon&gt;
    &lt;path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /&gt;
  &lt;/SvgIcon&gt;
</code></pre></div>
<p dir="auto">not</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Add /&gt;"><pre class="notranslate"><code class="notranslate">&lt;Add /&gt;
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">I've created createMuiTheme, and try to overrides material-ui-icons  and apply new styles,</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="MuiSvgIcon: {
            root: {
                width: 18,
                height: 18,
            },
        },"><pre class="notranslate"><code class="notranslate">MuiSvgIcon: {
            root: {
                width: 18,
                height: 18,
            },
        },
</code></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>v1-beta</td>
</tr>
<tr>
<td>React</td>
<td>15.5.4</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
<tr>
<td>material-ui-icons</td>
<td>^1.0.0-beta.10</td>
</tr>
</tbody>
</table>
<p dir="auto">TL;DR I'm trying to render a <code class="notranslate">Select</code> element inside of an iframe, but when I do this, the <code class="notranslate">MenuItem</code> components inside render in completely the wrong place. Looking into the code, I noticed that the portal was actually mounting at the root of the document instead of the iframe.</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>
<ol dir="auto">
<li>Add a <code class="notranslate">&lt;Select&gt;</code> with <code class="notranslate">&lt;MenuItem&gt;</code>s inside an iframe.</li>
<li>Click on the Select</li>
<li>MenuItem shows up in the expected location.</li>
</ol>
<h2 dir="auto">Current Behavior</h2>
<ol dir="auto">
<li>Add a <code class="notranslate">&lt;Select&gt;</code> with <code class="notranslate">&lt;MenuItem&gt;</code>s inside an iframe.</li>
<li>Click on the Select</li>
<li>MenuItem shows up in the wrong location.</li>
</ol>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">See above.</p>
<p dir="auto">CodeSandbox: <a href="https://codesandbox.io/s/73nnlv78wq" rel="nofollow">https://codesandbox.io/s/73nnlv78wq</a></p>
<p dir="auto"><strong>Note</strong>: in the codesandbox, the iframe doesn't contain material-ui styling. This is because the jss needs to be injected into the iframe explictly, as well as <code class="notranslate">&lt;MuiThemeProvider&gt;</code>. This is a different, unrelated issue and so I didn't take the time to implement that here.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">In my app, I have an iframe in which I would like to use material-ui components. This bug is preventing me from using anything that uses portals under the hood.</p>
<p dir="auto">I dug into the source a bit, and I have identified this as the issue: <a href="https://github.com/mui-org/material-ui/blob/v1-beta/src/internal/Portal.js#L47">https://github.com/mui-org/material-ui/blob/v1-beta/src/internal/Portal.js#L47</a>.</p>
<p dir="auto">Since this uses document directly, it ends up ignoring the context of my iframe and instead attaches the portal to the parent root. It would be nice if there was some way to manipulate this, maybe through context or props.</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>v1.0.0-beta.13</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>chrome v62.0.3202.9</td>
</tr>
</tbody>
</table>