[Web] google material-icons 적용하기(Outlined, Fill, Rounded, Sharp, Two tone)

폰트 아이콘

보통 홈페이지에서 아이콘은 이미지로도 사용하지만, 모바일도 지원해야 할 경우에 이미지의 크기를 조정해야 한다.

이미지의 크기를 2배 이상으로 넣어야 하고, 크기를 마음대로 늘리고 줄일 경우 깨짐 현상이 발생할 수도 있다.

이런 경우에 사용할 수 있는 것이 폰트 아이콘이다.

폰트 아이콘은 말 그대로 폰트 스타일 내부에 아이콘을 삽입해  제공함으로써 벡터 이미지의 형태를 띠게 된다.

폰트이기 때문에 사이즈나 컬러도 마음대로 조정할 수 있다. 또한 깨지지도 않는다.

google material icons 적용하기

google material icons는 사용성 높은 폰트 아이콘 중의 하나이며 한 아이콘에도 여러 가지 스타일을 제공한다.

5가지 아이콘 스타일 제공

사용법

1. 상단에 링크를 import한다. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2. 홈페이지에 들어간 후 원하는 아이콘을 선택하면 우측에 태그가 뜬다. 이 태그를 그대로 붙여 넣으면 끝이다.
3. 사용하려는 스타일이 Rounded일 경우 그 스타일도 같이 import 해주면 된다. <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

 

아이콘의 크기는 font-size 로 설정가능하며, line-height 등으로 조절해서 사용가능하다.

물론 다른 방법으로도 할 수 있다.