관련지식
html, css

깔끔하고 이쁜데 무료 아이콘 팩을 소개합니다. 웹뿐 아니라 IOS나 안드로이드 어플리케이션을 개발하면서도 사용 가능합니다.

경로 : https://material.io/tools/icons/?style=baseline
설치 가이드 : https://google.github.io/material-design-icons/

약 1000개 이상의 아이콘을 제공하고 있고 좌측의 테마 목록에서 ‘Filled’, ‘Outlined’, ‘Rounded’, ‘Two-Tone’, ‘Sharp’ 선택에 따라 다른 테마가 적용된 디자인을 보실수 있습니다.

사용법은 간단합니다. 먼저 상단에 링크된 설치가이드를 참고하여 세팅 합니다.

원하는 디자인의 아이콘을 클릭하면 좌측 하단에 ‘Selected Icon’ 메뉴가 생깁니다.

‘Selected Icon’을 클릭합니다. 그럼 아래와 같이 브라우저에서 적용가능한 태그가 나타납니다. 그 태그를 HTML에 붙이면 적용되겠습니다.

머티리얼(마테리얼? 매티리얼?) 디자인가이드를 따르는 style 을 적용하고 싶을 경우 설치가이드 하단의 ‘Styling icons in material design’ 항목을 참고해서 클래스를 만드시면 됩니다. 아래 내용은 내용의 일부 입니다.

  1. /* Rules for sizing the icon. */
  2. .material-icons.md-18 { font-size: 18px; }
  3. .material-icons.md-24 { font-size: 24px; }
  4. .material-icons.md-36 { font-size: 36px; }
  5. .material-icons.md-48 { font-size: 48px; }

이제 클래스를 다르게 적용하여 간단한 방법으로 다른 크기의 아이콘으로 적용 가능해졌습니다.