How to pass an icon as a prop?

I'm using props and I want to have "optionText" and "optionIcon" the 1st one I'm able to add but I'm not able to implement an icon as a prop

File where I'm creating props

import Icon from "@mui/material/Icon";

function HeaderMenuOptions({ optionText, OptionIcon }) {
  return (
    <div className="flex items-center text-center">
      <Icon>{OptionIcon}</Icon>
      <h1 className="py-1 my-1 hover:bg-menu-option-hover hover:text-black cursor-pointer">
        {optionText}
      </h1>
    </div>
  );
}

export default HeaderMenuOptions;

file where I'm using said props

        <div className="absolute left-72 top-3 rounded-md bg-section w-[10rem] text-center">
          <p className="menu-header mt-2">VIEW OPTIONS</p>

          <div className="flex items-center justify-center space-x-2 mr-2 cursor-pointer hover:bg-menu-option-hover hover:hover:text-black group">
            <HeaderMenuOptions optionText="Night Mode" />
            <CheckBoxIcon
              defaultChecked
              onClick={() => alert("Light mode has not been added yet!")}
              className="cursor-pointer text-blue-500"
            />
          </div>

          <p className="menu-header">MORE STUFF</p>
          <HeaderMenuOptions optionText="Premium" OptionIcon={SecurityIcon} />
          <HeaderMenuOptions optionText="TEST" />
          <HeaderMenuOptions optionText="TEST" />
          <HeaderMenuOptions optionText="TEST" />
          <HeaderMenuOptions optionText="TEST" />
        </div>

can anyone please help me. Thanks

The HeaderMenuOptions looks fine. You need to change the parent component.

You can do something like this.

<HeaderMenuOptions optionText="Premium" OptionIcon={<SecurityIcon />} />