MUIのIconの色やスタイルの変更、どうやるんだろう、と迷ったので備忘録的にメモ。
目次
Material Icons からIconを取得
MUIはMaterial Iconsページから提供されているIconコンポーネントを簡単に検索、使用ができるようになっている。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
Material Icons – Material UI
2,100+ ready-to-use React Material Icons from the official website.
検索すると、こんなかんじ。
![](https://tsukurue.com/wp-content/uploads/2023/11/image-11.png)
クリックすると、コードが表示され、コピー&ペーストで使用ができる。
![](https://tsukurue.com/wp-content/uploads/2023/11/image-12.png)
Materiau UIのIcon Styleを変更する
色やサイズの変更はstyleを利用して簡単にできる。
LocationOnIconをインポートして、コンポーネントのプロパティstyleにCSSと同様に設定するだけでoverrideしてくれる。
/**
* GPS pin
* https://mui.com/material-ui/material-icons/
*/
import LocationOnIcon from '@mui/icons-material/LocationOn'
const LocationPin = ({ color = 'rgb(255 49 49 / 78%)' }) => {
return <LocationOnIcon style={{ cursor: 'pointer', fill: color, stroke: 'none', fontSize: '30px' }} />
}
export default LocationPin
Summary
これでMUIのIconは自由自在です。