ふかしぎのReactさんぷるず

MUIでマテリアルアイコンを使ういくつかの方法 - Reactさんぷるず

最終更新 2022/02/16
MUI v5の各機能の説明です。
対象のMUIのバージョンはv5.4.1です。
ここでは初心者向けの基本的な説明をしています。

方法1 import

node.jsを使用している場合はimportするだけで使えます。
まずはマテリアルアイコンをインストール
npm install @mui/icons-material
そしてインポート
import { Add } from "@mui/icons-material";
インポートにはいくつか方法があります。Addだけではわかりづらいので別名にしたいのなら
import { Add as AddIconDayo } from "@mui/icons-material";
import AddIconDesu from "@mui/icons-material/Add";
などなど
そして
<Add />
<AddIconDayo />
<AddIconDesu />
で+が表示されるアイコンが使えます。

方法2 CDN

残念ながら@mui/icons-materialのCDNはありません。
あきらめましょう。

方法3 CDNじゃなく力業で独自定義

なければ自分で作っちゃえばいいじゃない。
ベクター情報さえあればMUIのcreateSvgIconで作れます。
ベクター情報があるpathのdの中身は例えばnode.jsで@mui/icons-materialをインストールした後にnode_modulesフォルダーの@mui\icons-material\Add.jsの中にあります。
SVGを作るのは簡単なので自分で作ってしまうのもいいかもしれません。
const createSvgIcon = MaterialUI.createSvgIcon;
const AddIcon = createSvgIcon(<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />,'AddIcon');
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
ReactDOM.render(
<div>
  <AddIcon />
  <div>MUIの+アイコン</div>
  <TukuttaIcon />
  <div>独自に作ったの十字アイコン</div>
</div>
, document.getElementById('sample')
);

方法4 Googleのマテリアルアイコンを使う

MUIのマテリアルアイコンを諦めてGoogleの方を使います。
まずはHTMLでスタイルシートを読み込みます。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
そして使います。
CSSのclassにmaterial-iconsを入れ該当するアイコン名を書くだけでそこにマテリアルアイコンが表示されます。
ReactDOM.render(
<span className="material-icons">add</span>
, document.getElementById('sample')
);
Googleのマテリアルアイコンの一覧はhttps://fonts.google.com/icons?selected=Material+Iconsで見ることができます。

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次