Material Ui Icon 오류

Module not found: Can't resolve '@mui/icons-material/AccessAlarm'

이런식으로 오류가 났다.

내 pakage.json을 살펴보니
@material-ui/icons: 4.11.2버전
@mui/material : 5.26버전
이렇게 설치되어 있었다.

아마 오류가 난 이유는 아이콘은 @material-ui로 받고 mui framework는 @mui/material로 받았기 때문인 듯.
아이콘을 쓰려면, 아이콘도 설치하고 framework도 설치해야 하는데 나는 두개를 다른 방식으로 설치한듯..

https://flatlogic.com/blog/material-ui-icons-in-react/
여기 링크에서 잘 정리해놓았다. 이 링크에선 @material-ui를 설치했다.

이렇게 링크도 따로 있다.
@material-ui
https://www.npmjs.com/package/@material-ui/icons

@mui/material
https://www.npmjs.com/package/@mui/icons-material
나는 위의 블로그 글을 보고 명령어를 입력했는데, 이 npmjs 보고 해도 될듯

그런데 공식 홈페이지에서는

이렇게 @mui/icons-material로 import를 하고 있다.

만약 @material-ui/icons로 import하고 싶다면

import AccountCircleIcon from "@material-ui/icons/AccountCircle";

이런식으로 작성하면 잘 된다.

svg Icon으로 삽입하기

svg Icon으로 삽입하고 싶으면 import해주어야 할 게 있다.
https://mui.com/api/svg-icon/ 여기 링크에 들어가서 이 코드를 삽입해주면 된다.

import SvgIcon from '@mui/material/SvgIcon';
// or
import { SvgIcon } from '@mui/material';

근데 보니까 이건 @mui/material을 추가하는데, @material-ui/icons를 쓰고 있다면

import { SvgIcon } from "@material-ui/core";

이렇게 작성하면 된다. (from 뒤에 있는 코드는 icon말고 material Ui framework를 뜻하는 거인듯)

---

그리고 쓰는 법은 아래처럼 컴포넌트를 만들고, return()부분에 <이름/>형태로 삽입하면 된다.

function HomeIcon(props) {
                	return (
                	  <SvgIcon {...props}>
	                      	  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
                	 </SvgIcon>
                	);
}
 
And the code for color setting would look the following way:
·   	<div className={classes.root}>
<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />

return(
...
   <HomeIcon />
...
)

출처 https://flatlogic.com/blog/material-ui-icons-in-react/