Material Symbols, Material Icons 사용 방법

Material Symbols, Material Icons 사용 방법

 

Material Symbols, Material Icons 차이점

https://fonts.google.com/icons 에 들어가면 아이콘의 스타일이 Material Symbols(default) 와 Material Icons으로 나뉘어져 있다. 이 둘 모두 구글의 공식 아이콘 세트이다.

Material Icons는 클래식 세트인 반면 Material Symbols는 가변 글꼴 기술을 기반으로 2022년 4월에 도입되었다. 

Material Symbols 는 세 가지 스타일과 4가지의 조정 가능한 가변 글꼴 축 (채우기, 두께, 등급, 광학 크기)으로 제공된다.

 

아래는 현재 Material Icons에서 사용할 수 없는 기능이다.

• variable fonts
• weights other than Regular
• grades other than Regular
• a means to animate Fill transitions

아래는 현재 Material Symbols에서 사용할 수 없는 기능이다.

• only the 20 and 24 px versions are designed with perfect pixel-grid alignment
• the only pre-made fonts are the variable fonts
• there are no two-tone icons

 

Material Icons 사용 방법

 

설정 방법 1. Google Fonts를 통해 사용

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

 

설정 방법 2. 자체 호스팅

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

 

CSS 규칙 선언 (자체 호스팅 시)

.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';
}

 

HTML에서 아이콘 사용

<span class="material-icons">face</span>

합자를 지원하지 않는 브라우저의 경우, 아래 예와 같이 숫자 문자 참조를 사용하여 아이콘을 지정하는 대신 사용한다.

아무 아이콘이나 선택하고 아이콘 글꼴 패널을 열어 머티리얼 아이콘 라이브러리에서 아이콘 이름과 코드 포인트를 모두 찾는다. 각 아이콘 글꼴에는 git 저장소의 코드 포인트 색인이 있어 전체 이름과 문자 코드 세트를 확인할 수 있다.

<span class="material-icons">&#xE87C;</span>

 

Material Symbols 사용 방법

 

설정 방법 1. Google Fonts를 통해 사용

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
      rel="stylesheet">

 

설정 방법 2. 자체 호스팅

 

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

 

CSS 규칙 선언 (자체 호스팅 시)

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  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;
}

 

HTML에서 아이콘 사용

<span class="material-symbols-outlined">error</span>
<span class="material-symbols-outlined">&#xe000;</span>

합자를 지원하지 않는 브라우저를 지원해야 하는 경우 숫자 문자 참조 (코드 포인트라고도 함)를 사용하여 아이콘을 지정한다.

 

 

참고

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

https://github.com/google/material-design-icons

GitHub - google/material-design-icons: Material Design icons by Google

https://developers.google.com/fonts/docs/material_icons?hl=ko

머티리얼 아이콘 가이드  |  Google Fonts  |  Google for Developers

https://github.com/google/material-design-icons/tree/master/font

https://developers.google.com/fonts/docs/material_symbols?hl=ko

Material 기호 가이드  |  Google Fonts  |  Google for Developers

https://dimorin.github.io/notosanskr/

Document