머티리얼 아이콘

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 아이콘
통신 아이콘
콘텐츠 아이콘
장치 아이콘
편집기 아이콘
파일 아이콘
하드웨어 아이콘
이미지 아이콘
지도 아이콘
탐색 아이콘
알림 아이콘
사회 아이콘
아이콘 전환

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