<h3 dir="auto">Problem description</h3>
<p dir="auto">The <em>Nearby</em> entry uses inline SVG and is left-aligned in contrast to the both other icons, which are centered.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/7819991/17661020/ea0618de-62dc-11e6-8fe9-5e68401ed364.png"><img src="https://cloud.githubusercontent.com/assets/7819991/17661020/ea0618de-62dc-11e6-8fe9-5e68401ed364.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Have a look at <a href="http://www.material-ui.com/#/components/bottom-navigation" rel="nofollow">http://www.material-ui.com/#/components/bottom-navigation</a></p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: v0.5.14</li>
<li>React: v15.3.0 (?)</li>
<li>Browser: Chrome Canary v54</li>
</ul>
<h3 dir="auto">Possible fix</h3>
<p dir="auto">If I add <code class="notranslate">margin: auto;</code> to the SVG element in the rendered code (Inspect), the icon is centered. I'm not sure how to apply this fix to the source code however, as I'm unfamiliar with React / MUI.</p>
<p dir="auto"><a href="https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/BottomNavigation/ExampleSimple.js">https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/BottomNavigation/ExampleSimple.js</a></p>
<h3 dir="auto">Problem description</h3>
<p dir="auto">SVG icons are not centered when used within BottomNavigation elements.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/279720/17645049/dc36d80e-614e-11e6-83dc-be16cb18fe91.png"><img width="384" alt="screen shot 2016-08-13 at 12 08 13 pm" src="https://cloud.githubusercontent.com/assets/279720/17645049/dc36d80e-614e-11e6-83dc-be16cb18fe91.png" style="max-width: 100%;"></a></p>