title: Using Material Icons with Styled Components
body: <p>Just started playing around with Styled Components. Is there a way to style third party icons such as Material Design Icons? This is the code I have so far but obviously it isn't working. <strong>Relavant code is below Content component</strong> Thanks!</p>
  
  <pre><code>const MaterialIcon = (props) =&gt; &lt;i className="material-icons"&gt;account_balance&lt;/i&gt;;
  
  const Icon = styled(MaterialIcon)`
    background-color: green;
    font-size: 50px;
  `;
  
  const CheckThisOut = props =&gt; (
    &lt;Wrapper&gt;
      &lt;Header&gt;
        &lt;h5&gt;{props.title}&lt;/h5&gt;
        &lt;Icon /&gt;
      &lt;/Header&gt;
      &lt;Divider /&gt;
      &lt;Content&gt;
        &lt;p&gt;5% of all participants in this campaign were first time users.&lt;/p&gt;
      &lt;/Content&gt;
    &lt;/Wrapper&gt;
  );
  
  export default CheckThisOut;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/X4RCQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/X4RCQ.png" alt="enter image description here"></a></p>