title: How to pass an icon as a prop?
body: <p>I'm using props and I want to have &quot;optionText&quot; and &quot;optionIcon&quot; the 1st one I'm able to add but I'm not able to implement an icon as a prop</p>
  <p>File where I'm creating props</p>
  <pre class="lang-js prettyprint-override"><code>import Icon from &quot;@mui/material/Icon&quot;;
  
  function HeaderMenuOptions({ optionText, OptionIcon }) {
    return (
      &lt;div className=&quot;flex items-center text-center&quot;&gt;
        &lt;Icon&gt;{OptionIcon}&lt;/Icon&gt;
        &lt;h1 className=&quot;py-1 my-1 hover:bg-menu-option-hover hover:text-black cursor-pointer&quot;&gt;
          {optionText}
        &lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  
  export default HeaderMenuOptions;
  
  </code></pre>
  <p>file where I'm using said props</p>
  <pre class="lang-js prettyprint-override"><code>        &lt;div className=&quot;absolute left-72 top-3 rounded-md bg-section w-[10rem] text-center&quot;&gt;
            &lt;p className=&quot;menu-header mt-2&quot;&gt;VIEW OPTIONS&lt;/p&gt;
  
            &lt;div className=&quot;flex items-center justify-center space-x-2 mr-2 cursor-pointer hover:bg-menu-option-hover hover:hover:text-black group&quot;&gt;
              &lt;HeaderMenuOptions optionText=&quot;Night Mode&quot; /&gt;
              &lt;CheckBoxIcon
                defaultChecked
                onClick={() =&gt; alert(&quot;Light mode has not been added yet!&quot;)}
                className=&quot;cursor-pointer text-blue-500&quot;
              /&gt;
            &lt;/div&gt;
  
            &lt;p className=&quot;menu-header&quot;&gt;MORE STUFF&lt;/p&gt;
            &lt;HeaderMenuOptions optionText=&quot;Premium&quot; OptionIcon={SecurityIcon} /&gt;
            &lt;HeaderMenuOptions optionText=&quot;TEST&quot; /&gt;
            &lt;HeaderMenuOptions optionText=&quot;TEST&quot; /&gt;
            &lt;HeaderMenuOptions optionText=&quot;TEST&quot; /&gt;
            &lt;HeaderMenuOptions optionText=&quot;TEST&quot; /&gt;
          &lt;/div&gt;
  </code></pre>
  <p>can anyone please help me. Thanks</p>