ふかしぎのReactさんぷるず

ListItemIconの解説 Componet API - MUI v5 API - Reactさんぷるず

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

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { ListItemIcon } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const ListItemIcon  = MaterialUI.ListItemIcon;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

ListItemIconの各プロパティの解説

MUIでのListItemIconの扱い方の説明です。
リストを作った時の各項目にアイコンを表示するときにリストの表示に合わせるためのラッパーです。
アイコンを直接表示してもあまり差がありませんがせっかく用意されているのですから使いましょう。
const List = MaterialUI.List;
const ListItemIcon = MaterialUI.ListItemIcon;
const ListItemButton = MaterialUI.ListItemButton;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemIcon>
      <TukuttaIcon />
    </ListItemIcon>
  </ListItemButton>
</List>
, document.getElementById('sample')
);
ちなみにListItemIconを使わずに直接Iconを表示すると微妙な違いが出てきます。
例えば色合いや後続の文章です。Iconを直接使った場合は濃い色で文章がすぐ横から始まります。
const List = MaterialUI.List;
const ListItemIcon = MaterialUI.ListItemIcon;
const ListItemButton = MaterialUI.ListItemButton;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
ReactDOM.render(
<div>
  <List>
    <ListItemButton>
      <ListItemIcon>
        <TukuttaIcon />
      </ListItemIcon>
      <div>ListItemIconあり</div>
    </ListItemButton>
  </List>
  <List>
    <ListItemButton>
      <TukuttaIcon />
      <div>ListItemIconなし、Icon直接</div>
    </ListItemButton>
  </List>
</div>
, document.getElementById('sample')
);

children

ListItemIconのchildrenの使い方の説明です。
表示するアイコンを設定できます。
ノードを設定できるのでアイコン以外も設定できますが、普通はアイコンを設定します。
const List = MaterialUI.List;
const ListItemIcon = MaterialUI.ListItemIcon;
const ListItemButton = MaterialUI.ListItemButton;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
ReactDOM.render(
<List>
  <ListItemButton>
    <ListItemIcon children={<TukuttaIcon />} />
  </ListItemButton>
</List>
, document.getElementById('sample')
);

classes

ListItemIconのclassesの使い方の説明です。
CSSの設定を上書きします。

sx

ListItemIconのsxの使い方の説明です。
他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。
menu

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
戻る

全体目次