<p dir="auto">Hi,<br>
The iconStyle for an icon button is overwritten in this piece of code in app-bar.js row 139 meaning that its not possible to set the style of an iconButton if its in the app-bar.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if (iconElementLeft) {
    switch (iconElementLeft.type.displayName) {
      case 'IconButton':
        iconElementLeft = React.cloneElement(iconElementLeft, {
          iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle)
        });
        break;
    }"><pre class="notranslate"><code class="notranslate">if (iconElementLeft) {
    switch (iconElementLeft.type.displayName) {
      case 'IconButton':
        iconElementLeft = React.cloneElement(iconElementLeft, {
          iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle)
        });
        break;
    }
</code></pre></div>
<p dir="auto">I have</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="render() {
    return &lt;AppBar style={{ position: &quot;fixed&quot; }} title={&lt;span&gt;my Title&lt;/span&gt;}

        iconElementLeft={&lt;IconButton&gt;&lt;NavigationMenu /&gt;&lt;/IconButton&gt;}
        iconStyleRight={{color:&quot;red&quot;}}
        iconElementRight={&lt;IconButton&gt;&lt;span className = &quot;material-icons&quot;&gt;account_circle&lt;/span&gt;&lt;/IconButton&gt;}
        /&gt;
}"><pre class="notranslate"><code class="notranslate">render() {
    return &lt;AppBar style={{ position: "fixed" }} title={&lt;span&gt;my Title&lt;/span&gt;}

        iconElementLeft={&lt;IconButton&gt;&lt;NavigationMenu /&gt;&lt;/IconButton&gt;}
        iconStyleRight={{color:"red"}}
        iconElementRight={&lt;IconButton&gt;&lt;span className = "material-icons"&gt;account_circle&lt;/span&gt;&lt;/IconButton&gt;}
        /&gt;
}
</code></pre></div>
<p dir="auto">but iconStyleRight is giving me the error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Type '{ [x: number]: undefined; color: any; }' is not assignable to type 'string'"><pre class="notranslate"><code class="notranslate">Type '{ [x: number]: undefined; color: any; }' is not assignable to type 'string'
</code></pre></div>
<p dir="auto">No idea why. I've tried many combinations, including adding a <code class="notranslate">style</code> to the <code class="notranslate">&lt;span&gt;</code> element, which is ignored.</p>
<p dir="auto">Is this a bug, or am I doing something wrong?</p>