<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 drawer should stick to the right side of the screen when set with <code class="notranslate">anchor="right"</code> and <code class="notranslate">type="permanent"</code>.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">The drawer sticks to the left.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/6626225/31045208-b3115604-a5de-11e7-8e53-c233cae1944e.png"><img width="1280" alt="screen shot 2017-09-30 at 12 50 39" src="https://user-images.githubusercontent.com/6626225/31045208-b3115604-a5de-11e7-8e53-c233cae1944e.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto"><code class="notranslate">&lt;Drawer anchor="right" type="permanent"&gt;&lt;div&gt;Hello, world!&lt;/div&gt;&lt;/Drawer&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>beta12</td>
</tr>
<tr>
<td>React</td>
<td>15.6.2</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td>MacOS</td>
</tr>
</tbody>
</table>
<p dir="auto">I've use an SVG for my <code class="notranslate">label</code> prop on the <code class="notranslate">Toggle</code> component, it displays fine. However the Toggle component does not propagate <code class="notranslate">:hover</code> / <code class="notranslate">hoverColor</code> to the <code class="notranslate">label</code> node. If I place an <code class="notranslate">SvgIcon</code> component next to <code class="notranslate">Toggle</code> it receives the hover event fine and changes color, not so when used as the <code class="notranslate">label</code> node for <code class="notranslate">Toggle</code>.</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/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">I expect the color of my SVG icon to change when hovering over it.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Hover event not received, no change in SVG style.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://codesandbox.io/s/42j70ln7m9" rel="nofollow">https://codesandbox.io/s/42j70ln7m9</a></p>
<ol dir="auto">
<li>View <a href="https://codesandbox.io/s/42j70ln7m9" rel="nofollow">Code Sandbox example</a></li>
<li>Mouseover both SVG images, <code class="notranslate">Toggle</code> component doesn't change SVG color on <code class="notranslate">:hover</code>.</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">UI polish, not essential but would be nice to have it working.</p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">Some details below but <a href="https://codesandbox.io/s/42j70ln7m9" rel="nofollow">issue reproduced in Code Sandbox</a>.</p>
<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>15.6.2</td>
</tr>
<tr>
<td>Chrome</td>
<td>63.0.3239.132</td>
</tr>
<tr>
<td>Firefox</td>
<td>57.0.4</td>
</tr>
</tbody>
</table>