MUI React プログラミング

React MUI: Material Icons のインストール

React MUI の Material Icons には、アプリケーション UI 開発でよく用いられるアイコンが提供されています。React MUI のコンポーネントと組み合わせることで、まとまりのある外観を素早く構築することができます。

Material Icons とは

Google が提供する Material Design に含まれるアイコン集をベースに、React MUI で利用できるようにラップしたものです。

Google 本家のアイコンは、下記ページを参照下さい。
Icons - Google Fonts

アイコンの一例：

参考ページ：Material Icons - Material UI (mui.com)

React MUI のコンポーネントサンプルにも、Material Icons は多く利用されています。例えば、下記の AppBar サンプルにおいても、複数の Material Icons が利用されていることが分かります。

Material Icons のインストール

React MUI: Material Icons は、@mui/icons-material をインストールすることで利用できます。

npm install @mui/icons-material

先に示した AppBar 上に表示されているアイコンの場合、次の様にアプリケーションにインポートします。

import MenuIcon from "@mui/icons-material/Menu";
import SearchIcon from "@mui/icons-material/Search";
import AccountCircle from "@mui/icons-material/AccountCircle";
import MailIcon from "@mui/icons-material/Mail";
import NotificationsIcon from "@mui/icons-material/Notifications";

そして、アイコンは次の様に宣言します。（MenuIcon の場合）

<AppBar position="static">
  <Toolbar>
    <IconButton
      ...
    >
      <MenuIcon />
    </IconButton>
  ...

動作サンプル

React MUI Material Icons を利用したサンプルは、下記ページにあります。適宜参照下さい。

React MUI: ダッシュボードアプリケーション（サンプルあり） | Water Margin

React MUI: Drawer の開閉を useContext でステート管理する | Water Margin

-MUI, React, プログラミング