なぜ必要になったか？

塗りつぶしのMaterial-UIのアイコンは、背景色に依存するため背景が透明だと想定したアイコンにならないことがありました。 そのため、背景色に依存しない塗りつぶし方法を紹介します。

背後に依存しない塗りつぶしアイコンの作成方法

サンプルコードで確認してみます。

import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
import AddCircleIcon from '@mui/icons-material/AddCircle';

function App() {
  return (
    <div className="App" style={{backgroundColor: 'gray'}}>
      {/* 背景色の枠が残ってしまう */}
      <AddCircleOutlineOutlinedIcon sx={{
        color: 'black',
        backgroundColor: 'white',
        borderRadius: '50%',
      }}/>
      {/* 背景色の枠が残らない */}
      <AddCircleIcon sx={{
        color: 'white',
        backgroundColor: 'black',
        borderRadius: '50%',
      }}/>
    </div>
  );
}

export default App;

上記のサンプルコードを実行すると、アイコンが背景に依存しない塗りつぶしアイコンとして表示されます。 一例として、AddCircleOutlineOutlinedIconとAddCircleIconを使用しています。

colorとbackgroundColorとboderRadiusを指定することで、背景色に依存しないアイコンを作成しています。

デザイン的にはAddCircleOutlineOutlinedIconの方が好ましいと思いますが、背景色に依存しないアイコンが欲しい場合はAddCircleIconが必要かも知れません。 他に良い作成方法がありましたら、ぜひ教えていただけますと幸いです。