머티리얼 기호 가이드

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

머티리얼 기호란 무엇인가요?

머티리얼 기호는 최신 디자인으로, 다양한 디자인 변형이 있는 단일 글꼴 파일에 2,500개 이상의 글리프를 통합합니다. 기호는 3가지 스타일과 4가지의 조정 가능한 가변 글꼴 축 (작성, 두께, 등급, 광학 크기)으로 제공됩니다. 머티리얼 기호 라이브러리에서 머티리얼 기호의 전체 세트를 참고하세요.

FILL

채우기를 사용하면 기본 아이콘 스타일을 수정할 수 있습니다. 단일 아이콘은 잔여 및 채워진 상태를 모두 렌더링할 수 있습니다.

상태 전환을 전달하려면 애니메이션 또는 상호작용에 채우기 축을 사용합니다. 기본값은 0, 완전 입력 시 1입니다. 가중치 축과 함께 채우기는 아이콘의 모양에도 영향을 미칩니다.

wght

가중치는 기호의 획 가중치를 정의하며, 두께 (100)와 굵게 (700) 사이의 가중치 범위를 사용합니다. 가중치는 기호의 전체 크기에도 영향을 미칠 수 있습니다.

GRAD

성적 축 시각화

가중치와 등급은 기호의 두께에 영향을 미칩니다. 등급 조정은 가중치 조정보다 더 세분화되어 있으며 기호 크기에 약간의 영향을 미칩니다.

성적은 일부 텍스트 글꼴에서도 사용할 수 있습니다. 텍스트와 기호 간의 경사 수준을 알맞게 조율할 수 있습니다. 예를 들어 텍스트 글꼴의 성적 값이 -25인 경우 기호는 -25와 같이 적절한 값과 일치시킬 수 있습니다.

다음과 같이 필요에 따라 성적을 사용할 수 있습니다.

낮은 강조 (예: -25학년): 어두운 배경의 밝은 기호에 대한 빛 반사를 줄이려면 낮은 성적을 사용합니다.

높은 강조 (예: 200점): 기호를 강조표시하려면 양수를 늘립니다.

opsz

광학 크기 범위는 20dp~48dp입니다.

이미지가 여러 크기에서 동일하게 표시되도록 하려면 아이콘 크기가 조정될 때 획 두께 (두께)가 변경됩니다. 광학 사이즈는 기호 크기를 늘리거나 줄일 때 획 가중치를 자동으로 조정하는 방법을 제공합니다.

머티리얼 기호 가져오기

머티리얼 기호는 여러 형식으로 제공되며 앱의 개발자 및 모형이나 프로토타입의 디자이너 모두에 적합한 다양한 유형의 프로젝트 및 플랫폼에 적합합니다.

라이선스

머티리얼 기호는 Apache 라이선스 버전 2.0에서 사용할 수 있습니다.

개별 아이콘 탐색 및 다운로드

머티리얼 기호의 전체 집합은 머티리얼 기호 라이브러리에서 SVG 또는 PNG 형식으로 사용할 수 있습니다. 웹, Android, iOS 또는 모든 디자이너 도구에 적합합니다.

Git 저장소

git 저장소에는 SVG 형식의 전체 머티리얼 기호 세트가 포함되어 있습니다.

$ git clone https://github.com/google/material-design-icons

머티리얼 기호 사용

웹에서 사용

머티리얼 기호 글꼴은 머티리얼 기호를 웹 프로젝트에 통합하는 가장 쉬운 방법입니다.

아이콘은 단일 글꼴로 패키징되므로 웹 개발자가 코드 몇 줄만으로 이러한 아이콘을 쉽게 통합할 수 있습니다.

Google Fonts의 정적 글꼴

모든 웹페이지에 사용할 수 있는 아이콘 글꼴을 설정하는 가장 쉬운 방법은 Google Fonts를 사용하는 것입니다. 한 줄의 HTML을 포함합니다.

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

위의 스니펫에는 각 의 기본 구성이 포함되어 있습니다. 가중치는 400, 광학 크기는 48, 성적은 0, 채움은 0입니다.

Fonts CSS API를 사용하여 다양한 축 값을 구성합니다. 다음 예를 살펴보세요.

CodePen에서 펜 머티리얼 기호: 가중치 100을 참고하세요.

Google Fonts에서 다양한 글꼴

CSS를 통해 아이콘을 애니메이션 처리하거나 아이콘 기능을 보다 세밀하게 제어하려면 Google 기호 변수 글꼴을 사용하세요. number..number 형식의 범위를 사용하여 전체 변수 글꼴을 로드할 수 있습니다. 가변적인 글꼴 지원 기능 사용 가능을 확인해 사용자가 가변적인 글꼴을 로드할 수 있는지 알아보세요. 다음은 몇 가지 예입니다.

애니메이션으로 만들 수도 있습니다.

CodePen에서

글꼴 자체 호스팅

애셋을 업데이트할 시기를 결정하기 위해 제어하는 위치에 아이콘 글꼴을 호스팅합니다. 예를 들어 URL이 https://example.com/material-symbols.woff이면 다음과 같은 CSS 규칙을 추가합니다.

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

글꼴을 올바르게 렌더링하려면 아이콘을 렌더링하기 위한 CSS 규칙을 선언합니다. 이러한 규칙은 일반적으로 Google Fonts API 스타일시트의 일부로 제공되지만, 자체 호스팅할 때 프로젝트에 수동으로 포함해야 합니다.

.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에서 아이콘 사용

위에 제공된 예에서는 텍스트 이름을 사용하여 아이콘 글리프를 렌더링할 수 있는 ligatures라는 활자 기능을 사용합니다. 웹브라우저는 자동으로 텍스트 결합을 아이콘 벡터로 대체하고 동등한 숫자 문자 참조보다 더 읽기 쉬운 코드를 제공합니다. 예를 들어 HTML에는 &#xE5C8; 대신 아이콘을 나타내는 arrow_forward이 있습니다.

이 기능은 데스크톱 및 휴대기기 대부분의 최신 브라우저에서 지원됩니다. 사용자가 결합을 처리할 수 있는지 확인하려면 리가식 지원 사용 가능 여부를 참고하세요.

결합을 지원하지 않는 브라우저를 지원해야 하는 경우 아래 예시와 같이 숫자 문자 참조 (코드 포인트)를 사용하여 아이콘을 지정합니다.

아이콘을 선택하고 아이콘 글꼴 패널을 열어 머티리얼 기호 라이브러리에서 아이콘 이름과 코드 포인트를 모두 찾습니다. 각 아이콘 글꼴은 Google Fonts git 저장소에 있는 코드 포인트 색인을 통해 이름과 문자 코드의 전체 집합을 보여줍니다.

머티리얼 디자인에서 아이콘 스타일 지정

이 아이콘은 머티리얼 디자인 가이드라인을 준수하도록 설계되었으며 권장 아이콘 크기 및 색상을 사용할 때 가장 보기 좋게 표시됩니다. 아래 스타일을 사용하면 권장 크기, 색상, 활동 상태를 쉽게 적용할 수 있습니다.

Android에서 사용

머티리얼 기호 라이브러리에서 모든 아이콘은 Vector Drawable 형식입니다. 자세한 내용은 Android Vector Asset Studio 문서를 참고하세요.

iOS에서 사용

Apple Symbol 형식으로도 아이콘을 사용할 수 있습니다. 자세한 내용은 공식 Apple 기호 개요사용법 안내를 확인하세요.

Flutter에서 사용

머티리얼 기호에 대한 Flutter 지원이 예정되어 있습니다. 조금만 기다려 주시기 바랍니다.