Component 변수를 인자로 넘겨주는 방법

WalletButton 이란 태그에서 icon을 넘겨주고 있는데요. 오류는 안나는데 보여지지가 않아서요

WalletButton이란 Components에다가 인자로 icon을 넘겨주는데, 이 아이콘은 heroicons에서 import해온거거든요.
얘를 WalletButton.tsx 에서 어떻게 써야될까요? {Icon}으로는 안되네요

In A.js

<WalletButton title=“Metamask” icon={} />

and WalletButton.js

function WalletButton( {title, Icon } : any ) {
return(
< div className="~~">
< div> {title }
{Icon} // here is the problem! not showing
< /div>
)
}

일단 <div className="~~">를 닫아주는 태그가 없고요.
iconIcon은 다릅니다.

function WalletButton({title, icon}: any) {
  return (
    <div className="~~">
      <div> {title} {icon} </div>
    </div>
  );
}

이렇게 하시면 질문하신 오류는 해결될 겁니다.