【MUI】ボタンの前後にアイコンを表示する方法

はじめに

ReactでMaterial UIを使っているときにボタンの前後にアイコンがあれば
Webページを訪れるユーザーにとって、とてもわかりやすいUIになります。

今回は、Material UIでボタンの前後にアイコン（Material Icon）を表示する方法を紹介します。

まずはMaterial UIとMaterial Iconをインストール

下記のnpmのコマンドを入力してMaterial UIとMaterial Iconをインストールしましょう。

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

Material UIでボタンの前にアイコンを表示する

ボタンの前にアイコンを表示するにはボタンにstartIcon属性を追加します。

<Button startIcon={<CheckIcon />}>

App.js

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import CheckIcon from "@mui/icons-material/Check";
import CancelIcon from "@mui/icons-material/Cancel";

function App() {
  return (
    <Box m={3}>
      <Stack direction="row" spacing={1}>
        <Button variant="contained" color="secondary" startIcon={<CheckIcon />}>
          OK
        </Button>
        <Button variant="contained" color="primary" startIcon={<CancelIcon />}>
          キャンセル
        </Button>
      </Stack>
    </Box>
  );
}

export default App;

Material UIでボタンの後ろにアイコンを表示する

ボタンの後ろにアイコンを表示するにはボタンにendIcon属性を追加します。

<Button endIcon={<CheckIcon />}>

App.js

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import CheckIcon from "@mui/icons-material/Check";
import CancelIcon from "@mui/icons-material/Cancel";

function App() {
  return (
    <Box m={3}>
      <Stack direction="row" spacing={1}>
        <Button variant="contained" color="secondary" endIcon={<CheckIcon />}>
          OK
        </Button>
        <Button variant="contained" color="primary" endIcon={<CancelIcon />}>
          キャンセル
        </Button>
      </Stack>
    </Box>
  );
}

export default App;