머티리얼 아이콘이란?

Google에서 개발 한 디자인 시스템 "Material"의 아이콘 글꼴.
라이센스는 Apache License 2.0이므로 거의 자유롭게 사용할 수 있습니다.
※Apache License 2.0에서 허가되고 있는 것·되어 있지 않은 것에 대해서는 이쪽의 기사 참조
Apache License 2.0이란? 라이센스 내용을 부드럽게 해설 | Beginner's Design Note

도입 방법

GoogleWebFonts를 통해 소개하는 방법과 웹사이트에 아이콘을 설치하는 방법의 두 가지 방법.

그 1 GoogleWebFonts를 통해 도입

html 파일의 head 태그 안에 다음을 기술하기만 하면 된다.

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

그 2 로컬 환경에 폰트 파일을 배치한다

material-design-icons/iconfont | GitHub에서 글꼴 파일을 다운로드하고 CSS 파일에 다음을 작성합니다.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../font/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../font/MaterialIcons-Regular.woff2) format('woff2'),
    url(../font/MaterialIcons-Regular.woff) format('woff'),
    url(../font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

아이콘 표시

아이콘을 표시할 위치에 다음 코드를 작성합니다.

<i class="material-icons">favorite</i>

그러면 웹 브라우저가 "favorite"라는 텍스트를 이미지로 자동 변환하고 다음 아이콘을 표시합니다.


텍스트를 이미지로 변환할 수 없는 브라우저의 경우에도 각 이미지에 할당된 코드를 사용하여 표시할 수 있습니다.

<i class="material-icons">&#xE87D;</i>

각 아이콘에 대응하는 코드는 material-design-icons/codepoints 참조

SVG 태그를 사용하여 표시

위의 방법으로 머티리얼 아이콘을 표시하면 브라우저가 IE인 경우 텍스트에서 이미지로 변환할 때 텍스트 문자가 순식간에 깜박이면 아이콘이 표시되는 현상이 발생했습니다.
(위의 아이콘의 경우라면, 한순간 「favorite」라고 텍스트로 표시된 후에 아이콘이 표시되는 이미지)

텍스트를 이미지로 변환하지 않고 아이콘을 표시하려면 SVG 태그를 사용합니다.

표시 방법

Icons - Material Design의 아이콘 목록에서 사용할 아이콘을 선택합니다

SVG 형식의 파일 다운로드

다운로드 한 파일을 편집기에서 표시하고 아이콘을 보려는 HTML에 SVG 태그를 복사합니다

위 예제에서 사용한 하트마크 아이콘의 SVG 태그는 다음과 같습니다.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>

SVG 태그의 fill에 색상을 지정하면 아이콘의 색상을 변경할 수 있습니다. 아래 예에서는 하트 아이콘의 색상을 빨간색으로 변경합니다.
(아이콘의 배경색을 변경하려면 path 태그의 fill에 색상을 지정합니다.)

<svg xmlns="http://www.w3.org/2000/svg" fill="red" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M13.35 20.13c-.76.69-1.93.69-2.69-.01l-.11-.1C5.3 15.27 1.87 12.16 2 8.28c.06-1.7.93-3.33 2.34-4.29 2.64-1.8 5.9-.96 7.66 1.1 1.76-2.06 5.02-2.91 7.66-1.1 1.41.96 2.28 2.59 2.34 4.29.14 3.88-3.3 6.99-8.55 11.76l-.1.09z"/></svg>

참고 링크

Apache License 2.0이란? 라이센스 내용을 부드럽게 해설 | Beginner's Design Note

Icons – Material Design

Material Icons Guide