[React] 06. Material UI Icon 사용법 초초 간단 소개

 

 

 

 

 

🙆‍♂️material-ui's Icon

---

npm install @mui/icons-material

먼저 터미널에서 material icons 설치합니다.

 

import SvgIcon from "@mui/material/SvgIcon";
import { SvgIconComponent } from "@mui/icons-material";

SvgIcon을 import 시킵니다.

 

https://mui.com/material-ui/material-icons/

Material Icons - Material UI

위 URL에서 사용하고 싶은 Icon 찾습니다.

 

import AbcIcon from '@mui/icons-material/Abc';

사용하고 싶은 Icon을 import 시킵니다.

 

 

function App(){
	return(
    	<Abc></Abc>
    );
}

function Abc(props) {
  return (
    <SvgIcon component={AbcIcon} inheritViewBox />
  );
}

위 같이 컴포넌트로 만들고 원하는 곳에 배치하여 사용합니다.

 

이를 응용하여 다양하게 사용할 수 있습니다.

https://mui.com/material-ui/icons/

React Icon Component - Material UI

보다 자세한 사항은 위의 문서에 작성되어 있습니다.

 

 

🙋‍♂️ 커스텀 아이콘

---

커스텀 아이콘은 path를 입력해줘야 합니다.

function Division(props) {
  return (
    <SvgIcon color="primary">
    	<path d="M19,13H5V11H19V13M12,5A2,2 0 0,1 14,7A2,2 0 0,1 12,9A2,2 0 0,1 10,7A2,2 0 0,1 12,5M12,15A2,2 0 0,1 14,17A2,2 0 0,1 12,19A2,2 0 0,1 10,17A2,2 0 0,1 12,15Z" />
    </SvgIcon>
  );
}

이런식으로 path를 적어야 하는데

https://materialdesignicons.com/

Material Design Icons

이런 사이트에서 

division을 찾고 View SVG를 하면

알 수 있습니다.