React + Material UIで動的にMaterialアイコンを表示する

Material UIのアイコンを入力とか、データループとかから動的に作成したかった

やりかた

サイドバーのデータを表示する例

import * as Icons from '@material-ui/icons/'

const datas = [
    {
        icon: 'Home',
        title: 'ホーム',
        to: '/home',
    }
]

function Sidebar(){
  return (
    <ul>
      {datas.map((data, index) => (
        <li>{React.createElement(Icons[data.icon])}</li>
      ))}
    </ul>
  )
}

import * as Icons from '@material-ui/icons/'で
モジュールのコンテンツすべてをインポートしています。参考

あとは、データをループしてReact.createElementでReact要素で対象のアイコンを作成しています

ちなみにTSでやる際はIcons[data.icon]でエラー吐いたので下記のように、Materialアイコンのkeyを使用するようにしました。

import * as Icons from '@material-ui/icons/';

interface route {
  icon: keyof typeof Icons;
  title: string;
  to: string;
}

const datas: route[] = [
    {
        icon: 'Home',
        title: 'ホーム',
        to: '/home',
    }
]