title: How do I style a material-ui Icon which was passed as prop
body: <p>I'm writing a custom Material UI React component which I want to pass an <code>Icon</code> into as a prop. However I want to style the icon when I get it and make it a minimum width and height. </p>
  
  <p>Here's a simplified version of what I'm trying to do. I want to apply the <code>iconStyle</code> to the icon passed in as <code>props.statusImage</code> but can't figure out how.</p>
  
  <pre><code>import PropTypes from "prop-types";
  import { makeStyles } from "@material-ui/styles";
  
  const useStyles = makeStyles({
    iconStyle: {
      minWidth: 100,
      minHeight: 100
    }
  });
  
  function MyComponentWithIconProps(props) {
    const styles = useStyles();
  
    return &lt;div&gt;{props.statusImage}&lt;/div&gt;;
  }
  
  MyComponentWithIconProps.propTypes = {
    statusImage: PropTypes.element
  };
  
  export default MyComponentWithIconProps;
  </code></pre>
  
  <p>I use the component like this </p>
  
  <pre><code>import {Done} from "@material-ui/icons";
  &lt;MyComponentWithIconProps statusImage={&lt;Done/&gt;}
  </code></pre>
  
  <p>Code Sandbox : <a href="https://codesandbox.io/s/jovial-fermi-dmb0p" rel="noreferrer">https://codesandbox.io/s/jovial-fermi-dmb0p</a></p>
  
  <p>I've also tried wrapping the supplied <code>Icon</code> in another <code>Icon</code> element and  attempting to style that. However that didn't work and seems sort of 'hacky' anyway.</p>