<p dir="auto">When adding multiple children to the button the placement is dependent of the order of the children.</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">Same placement, independent from the order.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Placement differs slightly. There is a problem with the inheriting display of the label. We could not inherit the display-prop (behavior like the html5-button-component).</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://codesandbox.io/s/y0vv1243w9" rel="nofollow">https://codesandbox.io/s/y0vv1243w9</a></p>
<h2 dir="auto">Context</h2>

<p dir="auto">I stumbled over that when working with custom icons implemented like <a href="https://material-ui-1dab0.firebaseapp.com/demos/buttons/#buttons-with-icons-and-label" rel="nofollow">the examples</a>. (used Fontawesome5-icons, <a href="https://codesandbox.io/s/k906lvwynv" rel="nofollow">like in this sandbox</a>).</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>1.0.0-beta.25</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>chrome 63.0.3239.108</td>
</tr>
</tbody>
</table>
<p dir="auto">I am facing a wired issue when trying to publish my app to production, I am using "npm run build" to build my app.the log contains some warning but its's not related to my issue:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npm WARN react-router@3.0.2 requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN recharts@1.0.0-beta.9 requires a peer of react-transition-group@^2.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;} (current: {&quot;os&quot;:&quot;win32&quot;,&quot;arch&quot;:&quot;x64&quot;})"><pre class="notranslate"><code class="notranslate">npm WARN react-router@3.0.2 requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN recharts@1.0.0-beta.9 requires a peer of react-transition-group@^2.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
</code></pre></div>
<p dir="auto">The problem is when I render the production build the app styles is corrupted while the js functions is working fine e.g.login, axios requests and routing.<br>
<strong>I figured out what causing this issue but I couldn't solve the issue:<br>
I am using jss-rtl as per the docs, so I have a HOC to wrap my components with so the RTL will be rendered properly, when I remove the RTL HOC the style is ok but the rtl is not rendered as expected e.g. Text field label is ltr:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;
import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();

export default function RTL(props) {
    return (
        &lt;JssProvider jss={jss} generateClassName={generateClassName}&gt;
            {props.children}
        &lt;/JssProvider&gt;
    );
}"><pre class="notranslate"><code class="notranslate">import React from "react";
import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();

export default function RTL(props) {
    return (
        &lt;JssProvider jss={jss} generateClassName={generateClassName}&gt;
            {props.children}
        &lt;/JssProvider&gt;
    );
}
</code></pre></div>
<p dir="auto">Usage:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;form&gt;
&lt;RTL&gt;
 &lt;TextField
       placeholder=&quot;username&quot;
       label=&quot;username&quot;
       fullWidth={true}
        value={this.state.login}
        onChange={this.handleLogin}
        margin=&quot;normal&quot;
           /&gt;
&lt;/RTL&gt;
...
&lt;/form&gt;"><pre class="notranslate"><code class="notranslate">&lt;form&gt;
&lt;RTL&gt;
 &lt;TextField
       placeholder="username"
       label="username"
       fullWidth={true}
        value={this.state.login}
        onChange={this.handleLogin}
        margin="normal"
           /&gt;
&lt;/RTL&gt;
...
&lt;/form&gt;
</code></pre></div>
<p dir="auto">I tried to solve this issue in last two day with no luck :(. so I am here to file this issue.</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">Material ui components should be displayed correctly in production as in dev mode.<br>
<a href="https://i.imgur.com/idJgFxo.png" rel="nofollow">Expected like dev mode</a></p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Corrupted TextField styles (while button styles is ok!):<br>
<a href="https://i.imgur.com/rUqGO38.png" rel="nofollow">Corrupted styles in prod</a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">1.Follow RTL enabling steps <a href="https://material-ui-next.com/guides/right-to-left/" rel="nofollow">here</a><br>
2.Add jss-rtl<br>
3.Use the <a href="https://material-ui-next.com/guides/right-to-left/#3-jss-rtl" rel="nofollow">HOC </a>to wrap any textfield in your code.<br>
4.npm run build</p>
<h2 dir="auto">Context</h2>
<p dir="auto">This my first app that should be deployed in production environment, the app should be fully RTL in Arabic. unfortunately this issue delayed the deployment 3 days until now.</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>1.0.0-beta.33</td>
</tr>
<tr>
<td>React</td>
<td>^16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>chrome 64</td>
</tr>
<tr>
<td>react-jss</td>
<td>^8.1.0</td>
</tr>
<tr>
<td>jss-rtl</td>
<td>^0.2.1</td>
</tr>
</tbody>
</table>