Material UI 아이콘 사용하기

지난 포스팅에서는 Material UI의 <Typography/> 컴포넌트를 사용하여 텍스트를 표현하는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 텍스트와 더불어 UI에서 감초같은 역할을 하는 아이콘을 Material UI에서 어떻게 사용할 수 있는지 알아보도록 하겠습니다.

Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다.

Material Icons

Material UI는 @material-ui/icons 패키지를 통해서 1,000 여종의 SVG 아이콘을 제공하고 있습니다. 그래서 아이콘을 엄청 많이 쓰는 앱이 아니라면 다른 아이콘 패키지가 필요가 없는 경우가 대부분일 것입니다.

$ npm install @material-ui/icons

사용 방법은 정말 간단합니다. Material Icons 페이지에서 원하는 아이콘을 검색합니다. 그 다음, 해당 아이콘 컴포넌트를 불러와서, React 컴포넌트 안에서 바로 사용하면 됩니다.

import React from "react";
import EcoIcon from "@material-ui/icons/Eco";

export default () => <EcoIcon />;

아이콘의 색상은 color prop으로 바꿀 수 있습니다.

<EcoIcon color="primary" />
<EcoIcon color="secondary" />
<EcoIcon color="action" />
<EcoIcon color="disabled" />
<EcoIcon color="error" />

아이콘의 크기는 fontSize prop으로 바꿀 수 있습니다.

<EcoIcon fontSize="small" />
<EcoIcon />
<EcoIcon fontSize="large" />

커스텀 아이콘 사용하기

Material UI는 커스텀 SVG 아이콘을 사용할 수 있도록 <SvgIcon/> 컴포넌트를 제공하고 있습니다. <SvgIcon/> 컴포넌트는 @material-ui/core 패키지의 일부이므로, @material-ui/icons 패키지를 설치할 필요가 없습니다.

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

export default () => (
  <SvgIcon color="primary">
    <path d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z" />
  </SvgIcon>
);

Material Design Icons은 2,000 여종의 커스텀 아이콘을 제공하고 있습니다. 이 방대한 종류의 아이콘을 위와 같은 방법으로 Material UI와 함께 사용할 수 있습니다.

폰트 아이콘 사용하기

Material Icons은 SVG 아이콘으로 사용하는 것이 성능이나 화질 측면에서 권장되지만, SVG 아이콘을 사용할 수 없는 특수한 경우라면 웹폰트 아이콘으로도 사용할 수 있습니다. 이 경우에는 @material-ui/icons 패키지를 설치하는 대신에, index.html 파일의 <head/>에 아래 코드를 추가하여, Material Icons을 웹폰트로 불러와야 합니다.

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

그 다음, @material-ui/core 패키지에서 제공하는 <Icon/> 컴포넌트에 아이콘 이름을 넘겨주면 폰트 아이콘을 사용할 수 있습니다.

import React from "react";
import { Icon } from "@material-ui/core";

export default () => (
  <Icon color="secondary" fontSize="large">
    eco
  </Icon>
);

전체 코드

본 포스팅에서 작성한 코드는 아래에서 확인하실 수 있습니다.

마치면서

이상으로 Material UI에 제공하는 Material Icons 컴포넌트와 <SvgIcon/> 또는 <Icon/> 컴포넌트를 활용해서 어떻게 아이콘을 표현할 수 있는지 살펴보았습니다. 다음 포스팅에서는 Material UI를 사용하면 자주 사용할 수 밖에 없는 <Button/> 컴포넌트에 대해서 알아보겠습니다.