[MUI] Change Icon Style of Materiau UI

I was wondering how to change the colour and style of the MUI Icon, and how to do it, so I made a note of this as a reminder.

Get Icon from Material Icons

The MUI allows easy search and use of the Icon components provided on the Material Icons page.

あわせて読みたい

Material Icons – Material UI 2,100+ ready-to-use React Material Icons from the official website.

Search for.

Click on it and the code is displayed and can be copied and pasted for use.

Changing the Icon Style of the Materiau UI.

Colours and sizes can be easily changed using STYLE.

Simply import LocationOnIcon and set it to override the component’s property style in the same way as CSS.

/**
 * 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

The MUI Icon is now at your disposal.