구글 머티리얼 아이콘을 알아보자!

 

구글에서 제공해 주는 아이콘은 어떻게 쓸까 알아볼까요?

 

 

 

 

폰트어썸과 더불어 많이 사용하는구글 머티리얼 아이콘을 알아 볼게요.

 

 

폰트어썸이 유니코드(unicode) 번호를 제공하는 메릿트가 있다면,

 

구글 머티리얼 아이콘(Google Material Icons)의 메릿트는 png 형태와 더불어 svg 형태의 파일을 제공한다는 점이죠.

 

물론, 태그형태의 소스도 제공하구요.

 

 

구글 머티리얼 아이콘은 어느 사이트에서 제공할까요?

 

아래 url을 따라 들어가면 짜잔 하고 나온답니다.

 

https://material.io/resources/icons/?style=baseline

 

 

여기 사이트에서 아래로 스크롤 하면서 원하는 아이콘 모양을 선택을 해도 되고, 검색창에서 영어로 해당하는 아이콘을 검색해도 된답니다.

 

 

폰트어썸 사이트도 그렇고 구글 머티리얼 아이콘 사이트도 그렇고 검색은 모두 영어로.

 

그래서 검색에 주로 사용되는 영어단어도 틈틈히 알아 두시면 좋아요.

 

 

 

 

arrow로 한 번 검색을 해보면 아래와 같이 아이콘들이 보이시죠?

 

 

 

 

그중에 저는 오른쪽 방향의 arrow를 선택했습니다.

 

파일은 png 형태의 아이콘이 필요해서 png를 다운로드 했어요.

 

 

 

 

zip으로 다운로드된 파일을 압축해제 하면 아래와 같이 1x, 2x 2개의 사이즈 파일이 있고,

 

그중에 원하시는 사이즈를 선택해서 사용하면 됩니다.

 

 

 

 

svg 파일이 필요할 때면 svg 파일을 선택해서 다운로드 하세요.

 

 

svg 파일 코딩 방법은 아래 유튜브 동영상을 참고하세요.

 

저도 이분 유튜브 동영상에서 여러 가지를 배우고, 유용한 내용이 많아서 소개해 드립니다.

 

 

https://youtu.be/oqoMx-149tk

 

 

이렇게 해서 구글 머티리얼 아이콘 사이트에서 png파일과 svg 파일을 사용하는 방법을 알아 보았습니다.

 

 

이제는 태그소스를 사용하는 방법을 간단히 알아보겠습니다.

 

태그소스를 사용할려면 우선 cdn을 가져와야 하겠죠?

 

아래 사이트를 방문하셔서

 

https://google.github.io/material-design-icons/

 

 

스크롤로 아래로 쑤우우욱~~ 내려오시면......

 

바로 여기!!!

 

아래의 링크 정보를 그대로 복사해 가면 ok.

 

 

 

요렇게 복사해 가시면 된답니다.

 

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

 

 

이제 html 파일에 아래의 소스를 복사해서 갖다 붙이면 됩니다.

 

폰트어썸의 소소는 i 태그로 되어 있는 반면에 구글 머티리얼 아이콘은 span태그로 되어 있습니다.

 

크기나 기타 스타일은 이제 css에서 꾸며 보세요.

 

 

 

 

이렇게 해서 구글 머티리얼 아이콘의 png, svg 파일을 사용하는 방법과 cdn을 가져와서 소스를 가져다 사용하는 방법 모두 알아 보았습니다.

 

 

아이콘은 특별히 포토샵이나 일러스트에서 만들 필요가 없다면 폰트 어썸과 구글 머티리얼 아이콘을 써도 충분하지 않을까 합니다.

 

 

그럼 오늘도 즐거운 하루 되세요 !!!