머티리얼 아이콘

Google은 '머티리얼 디자인 가이드 라인'에 따라 디자인 된 750 개의 아이콘 세트를 제공하며 Material Design아이콘. 이 아이콘은 간단하며 모든 최신 웹 브라우저를 지원합니다. 이러한 아이콘은 벡터 기반이므로 확장 가능합니다. 이 아이콘을 사용하려면 글꼴 (라이브러리)을로드해야합니다.material-icons.

글꼴로드 (라이브러리)

재질 아이콘 라이브러리를로드하려면 웹 페이지의 <head> 섹션에 다음 줄을 복사하여 붙여 넣습니다.

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

아이콘 사용

Google의 Material Icons는 긴 아이콘 목록을 제공합니다. 그중 하나를 선택하고 <body> 태그 내의 HTML 요소에 아이콘 클래스 이름을 추가합니다. 다음 예에서는 이름이 지정된 아이콘을 사용했습니다.accessibility 액션 카테고리에 속합니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

다음과 같은 출력이 생성됩니다.

크기 정의

CSS에서 아이콘의 크기를 정의하고 아래와 같이 클래스 이름과 함께 사용하여 아이콘의 크기를 늘리거나 줄일 수 있습니다. 다음 예에서는 크기를 6 em으로 선언했습니다.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

다음과 같은 출력이 생성됩니다.

색상 정의

CSS를 사용하여 아이콘의 색상을 정의 할 수 있습니다. 다음 예제는라는 아이콘의 색상을 변경하는 방법을 보여줍니다.accessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

다음과 같은 출력이 생성됩니다.

카테고리 목록

Google의 Material Icons 글꼴은 다음 카테고리에서 519 개의 아이콘을 제공합니다.

  • 액션 아이콘
  • 경고 아이콘
  • AV 아이콘
  • 통신 아이콘
  • 콘텐츠 아이콘
  • 장치 아이콘
  • 편집기 아이콘
  • 파일 아이콘
  • 하드웨어 아이콘
  • 이미지 아이콘
  • 지도 아이콘
  • 탐색 아이콘
  • 알림 아이콘
  • 사회 아이콘
  • 아이콘 전환

이러한 아이콘을 사용하려면이 장에 제공된 프로그램의 클래스 이름을 원하는 아이콘의 클래스 이름으로 바꿔야합니다. 이 단원 (머티리얼 아이콘)의 다음 장에서는 다양한 머티리얼 아이콘의 사용법과 각 출력에 대해 범주별로 설명했습니다.