[HTML] 구글 머터리얼(material) 아이콘 사용 방법

 

웹 개발을 할 때 모든 디자인 요소를 직접 만들 필요 없다.

구글 머터리얼에서 제공하는 기능을 사용하면, 간단히 디자인 요소를 사용할 수 있다.

오늘 설명할 내용은 아이콘을 사용하는 방법이다.

(Material Design 2 기준으로 설명. 가장 최신 버전은 Materia Design 3이다)

 

1. Material Design 웹사이트에서 CDN 설치 설명 확인

다른 디자인 요소도 제공하지만, 아이콘만 사용할 거라면 빨간색 박스 안에 있는 내용만 head 태그 안에 넣어주면 된다.

 

 

2. 원하는 아이콘 검색 후 태그 복사

 

구글 폰트 사이트에서 원하는 아이콘 내용을 검색한다.

https://fonts.google.com/icons?selected=Material+Icons&icon.query=arrow 

Material Symbols and Icons - Google Fonts

 

다양한 아이콘을 추천해준다.

 

아이콘을 선택하면, 해당 태그를 확인할 수 있다.

 

 

해당 태그를 사용하고자 하는 body 태그 안에 위치시킨다.

 

 

화면에 잘 출력되는 것을 볼 수 있다

 

 

참고 자료

https://m2.material.io/develop/web/getting-started

Material Design

 

https://fonts.google.com/icons?selected=Material+Icons&icon.query=arrow 

Material Symbols and Icons - Google Fonts