【小ネタ】MUI の SvgIcon の色を Theme で変更する

はじめに

たまにハマって調べるので備忘録として。

対応バージョン

• MUI > v5.10.10 (たぶん、5系なら大丈夫）

やり方

import { ThemeProvider } from "@mui/material/styles";
import { createTheme } from "@mui/material/styles";
import { createRoot } from "react-dom/client";
import App from "./app";

const theme = createTheme({
  components: {
    MuiSvgIcon: {
      styleOverrides: {
        colorPrimary: {
          "& path": {
            color: "#67C23A",
          },
        },
      },
    },
  }
});

const container = document.getElementById("root");
const root = createRoot(container as Element);
root.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

軽く説明

SvgIcon は、 svg タグの子要素として path タグがあり、アイコンはその path タグで描いているため、
色を変える場合は path タグを指定する必要がある。