<p dir="auto">I wan't to create a button with the white icon arrow-downward and I do it in the following way:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import IconArrowDownward from 'material-ui/lib/svg-icons/navigation/arrow-downward'
(...)
&lt;RaisedButton style={{flexGrow: 2}} primary={true} label=&quot;Know&quot; labelPosition=&quot;after&quot;&gt;
    &lt;IconArrowUpward color=&quot;white&quot; style={{verticalAlign: 'middle'}} /&gt;
&lt;/RaisedButton&gt;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">IconArrowDownward</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/lib/svg-icons/navigation/arrow-downward'</span><span class="pl-kos"></span>
<span class="pl-kos">(</span>...<span class="pl-kos">)</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">RaisedButton</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">flexGrow</span>: <span class="pl-c1">2</span><span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">primary</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span> <span class="pl-c1">label</span><span class="pl-c1">=</span><span class="pl-s">"Know"</span> <span class="pl-c1">labelPosition</span><span class="pl-c1">=</span><span class="pl-s">"after"</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">IconArrowUpward</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"white"</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">verticalAlign</span>: <span class="pl-s">'middle'</span><span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">RaisedButton</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">The icon is still black. Other icons work perfectly. For example if I change the icon to arrow-upward - it's white.</p>
<p dir="auto"><a href="https://github.com/callemall/material-ui/blob/master/src/svg-icons/navigation/arrow-downward.jsx#L12">https://github.com/callemall/material-ui/blob/master/src/svg-icons/navigation/arrow-downward.jsx#L12</a><br>
can't change color icon.</p>