React MUIのDrawerでIconを文字列で指定したい

ReactのUIフレームワーク「MUI」では、アイコンをコンポーネントで指定します。

<InboxIcon />

DBから取得したデータを元にメニューを作ったりアイコンを表示するにはコンポーネントでは動的に変更できません。
そこで文字列で指定する方法を記載します。

Icon fontを追加

index.html等のルートのheadタグ内でIconFontを読み込みます。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

公式ドキュメント
<https://mui.com/components/icons/#icon-font-icons>

アイコンコンポーネント内で文字列で指定

Iconコンポーネントをimportした上で使用したいアイコン名(star)を文字列を指定します。

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

<Icon>star</Icon>;

公式ドキュメント
<https://mui.com/components/icons/#icon-font-icons>