Pass React Icon as props to Client Component in NextJS

I build a dynamic button:

'use client';

import type { IconType } from 'react-icons';

interface ButtonProps {
  children: React.ReactNode;
  Icon: IconType;
}

export default function Button(props: ButtonProps) {
  const { children,  Icon } = props;

  return (
    <button>
      <Icon />
      {children}
    </button>
  );
}

I got a problem when passing React Icon as props: Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". <... Icon={function} children=...>.

I have no idea how to insert 'use server' into React Icon component?

Props passed from server components to client components need to be serializable, since they're sent across the network. A component is a function, which is why you're seeing that error message.

Where is the Icon component coming from? Can you just import it directly in the client component instead?