Material-UI（MUI）でアイコンだけ使う

Next.jsでMaterial-UIのアイコンだけを使う方法です。
アイコンの数は2024/01時点で2,127件もありました・・・すごい数。

アイコンに関わるライブラリをインストール

npm install @mui/icons-material
npm install @emotion/react
npm install @emotion/styled

あとは例えばポケモンのモンスターボールアイコンを使いたい場合は

import React from 'react';
import CatchingPokemonIcon from '@mui/icons-material/CatchingPokemon';

function App() {
  return (
    <div>
      <CatchingPokemonIcon />
    </div>
  );
}

export default App;

アイコンの色やサイズを変えるには

<CatchingPokemonIcon style={{ fontSize: 40, color: 'red' }} />

かんたんです！