Google Material Icons 구글 머터리얼 아이콘 HTML 활용법

 

1. 구글 머터리얼 아이콘

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

 

 

2. 적용법

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

<!-- ligatures 예시 -->
<span class="material-icons">face</span>

<!-- numeric character 예시 -->
<span class="material-icons">&#xE87C;</span>

1. ligatures(합자)라고 불리는 typographic 기능을 사용한 예시
2. 텍스트 이름만 사용해서 아이콘을 렌더링함
3. 대체 작업(텍스트 → 아이콘)은 웹 브라우저에 의해 자동으로 수행
4. 데스크탑, 모바일 기기, 대부분의 최신 브라우저에서 지원됨

3. 아이콘 스타일 지정

/* 아이콘 사이즈 조정 */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }

/* 밝은 배경에 검정색 아이콘 */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 어두운 배경에 흰색 아이콘 */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

4. Sizing

/* 아이콘 사이즈 조정 */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }

/* 밝은 배경에 검정색 아이콘 */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 어두운 배경에 흰색 아이콘 */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

1. 아이콘 크기는 자유롭게 조정 가능
2. material design icons 가이드라인에 따르면 18, 24, 36, 48px 권장
3. default는 24px

5. Coloring

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

1. active icon
2. disabled/inactive icon
3. 예시
4. 색상 지정

6. 활용 예시

line 6, 12 참조

내가 작성한 코드를 발췌한 것이지만, 이 경우 credit_card 뿐만 아니라 모든 material-icons가 조정된다.

추후 이 페이지에 다른 icon이 추가될 수 있으니 좋은 예시는 아니다.

따라서,

<span class="material-icons credit">credit_card</span>

.credit {
 /* 조정할 요소 */
}

이렇게 수정하면 credit_card만 조정된다!

 

+) 다른 사용법

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

i 태그도 사용 가능하다

<i> 태그는 원래 이탤릭체를 표시하는 태그인데, 최근에는 아이콘 폰트 라이브러리와 함께 아이콘을 표시하는 데 자주 사용된다고 한다

Material Icons나 Font Awesome과 같은 아이콘 폰트 라이브러리에서는 `<i>` 태그 안에 아이콘의 이름을 지정하여 아이콘을 삽입할 수 있다

 

7. 정리 출처

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

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