# Material Icons

> Google의 Material Design 공식 아이콘 세트입니다. 5가지 테마와 2,000개 이상의 아이콘을 제공합니다.

- 층: 아카이브 (아이콘 패키지)
- ID: material-icons
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/material-icons

## 정의

Google의 Material Design 공식 아이콘 세트입니다. 5가지 테마와 2,000개 이상의 아이콘을 제공합니다.

## 주요 특징

- 2,100개 이상의 공식 아이콘
- 5가지 테마 (Filled, Outlined, Rounded, Two-tone, Sharp)
- Material Design 가이드라인 준수
- Google 공식 지원
- 다양한 카테고리

## 핵심 원칙

- npm install @mui/icons-material
- 번들 사이즈: 개별 import 권장
- 2,100+ 아이콘 (5가지 테마)

## 컬러 시스템

5가지 스타일 변형. Material Design 색 시스템과 함께 사용 최적화

### 색상 역할

- filled: 일반 상태 — currentColor fill
- outlined: 비활성 또는 보조 — currentColor stroke
- two-tone: 두 색 계층 — primary + alpha 20%

### 색상 제약

- Material Design 외 프로젝트에서 outlined 스타일 권장 (덜 Google스러움)
- two-tone 사용 시 alpha 색상 일관성

### 다크모드 전략

currentColor 처리. two-tone의 alpha 색 다크 환경에서 검토 필요

### 대비 요구사항

Material 기본 가이드라인 준수

## 타이포그래피

- 폰트 성격: 아이콘 패키지 — 타이포그래피 해당 없음. Material Icons는 filled/outlined/rounded/sharp/two-tone 5종 스타일
- 권장 폰트 수: 최대 0개
- 타입 스케일: 아이콘은 4px 배수 크기 권장 (16/20/24/32/40px)

### 타이포그래피 제약

- 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장
- fill 또는 stroke 변형별 stroke-width — 텍스트 굵기와 시각적 균형 맞추기

## 설계 제약

### 하면 안 되는 것

- 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만
- 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수
- Material Icons 아이콘을 지나치게 크게 사용 금지 — Material Design 기반 프로젝트 최적화

### 반드시 포함할 것

- 일관된 크기 사용 (24px 기본 권장)
- 인터랙티브 아이콘에 tooltip 또는 레이블
- hover/active 상태 색상 피드백

### 모션 가이드

아이콘 자체 애니메이션 최소화. hover 시 opacity 변화 또는 scale 1.1 정도만.

## 사용 사례

- Material Design 기반 앱
- MUI 컴포넌트 라이브러리 사용 시
- Android·Google 생태계

## 추천 프로젝트 유형

- Material Design 앱
- MUI 기반 프로젝트
- Android·Google 생태계

## 장단점

### 장점

- Material Design과 완벽 통합
- 5가지 테마로 다양한 스타일
- Google 공식 지원

### 단점·한계

- MUI 의존성 생길 수 있음
- 번들 사이즈 관리 필요
- Material 스타일에 종속

## 자주 묻는 질문

### Q1. Material Icons이란 무엇인가요?

Google의 Material Design 공식 아이콘 세트입니다. 5가지 테마와 2,000개 이상의 아이콘을 제공합니다.

### Q2. Material Icons의 핵심 디자인 원칙은 무엇인가요?

Material Icons의 핵심 원칙은 npm install @mui/icons-material, 번들 사이즈: 개별 import 권장, 2,100+ 아이콘 (5가지 테마)입니다.

### Q3. Material Icons은 어떤 프로젝트에 적합한가요?

Material Icons은 Material Design 기반 앱, MUI 컴포넌트 라이브러리 사용 시, Android·Google 생태계, Material Design 앱, MUI 기반 프로젝트, Android·Google 생태계 등의 프로젝트에 적합합니다.

### Q4. Material Icons의 장단점은 무엇인가요?

장점으로는 Material Design과 완벽 통합, 5가지 테마로 다양한 스타일, Google 공식 지원이 있습니다. 단점으로는 MUI 의존성 생길 수 있음, 번들 사이즈 관리 필요, Material 스타일에 종속이 있습니다.

### Q5. Material Icons에서 색상은 어떻게 사용하나요?

5가지 스타일 변형. Material Design 색 시스템과 함께 사용 최적화 색상 역할은 filled: 일반 상태 — currentColor fill, outlined: 비활성 또는 보조 — currentColor stroke, two-tone: 두 색 계층 — primary + alpha 20%입니다. 주의사항: Material Design 외 프로젝트에서 outlined 스타일 권장 (덜 Google스러움), two-tone 사용 시 alpha 색상 일관성.

### Q6. Material Icons에 어울리는 폰트 스타일은 무엇인가요?

Material Icons에는 아이콘 패키지 — 타이포그래피 해당 없음. Material Icons는 filled/outlined/rounded/sharp/two-tone 5종 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, fill 또는 stroke 변형별 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.

### Q7. Material Icons 디자인에서 하면 안 되는 것은 무엇인가요?

Material Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Material Icons 아이콘을 지나치게 크게 사용 금지 — Material Design 기반 프로젝트 최적화.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #2196F3
- secondary: #1976D2
- accent: #64B5F6
- background: #FAFAFA
- surface: #FFFFFF
- text: #212121
- textSecondary: #757575
- border: #E0E0E0

### 타이포그래피

- fontFamily: Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 500
- bodyWeight: 400
- letterSpacing: 0.01em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 16px / full 9999px
- shadow sm: 0 2px 4px rgba(0,0,0,0.1)
- shadow md: 0 4px 8px rgba(0,0,0,0.15)
- shadow lg: 0 8px 16px rgba(0,0,0,0.2)
- border: 1px solid #E0E0E0

### 컴포넌트 형태

- button: rounded / hover lift / text uppercase
- card: elevated / hover lift
- input: outlined / focus border
- badge: pill / solid
- icon: material / stroke 2 / size 24px
- layout: boxed / section normal
- animation: 300ms cubic-bezier(0.4, 0, 0.2, 1)

## 관련 링크

### 관련 스타일

- [React Icons](https://ui.buildersgate.com/styles/react-icons)
- [Phosphor Icons](https://ui.buildersgate.com/styles/phosphor-icons)
- [Tabler Icons](https://ui.buildersgate.com/styles/tabler-icons)

---

HTML 버전: https://ui.buildersgate.com/styles/material-icons

이 문서는 https://ui.buildersgate.com/styles/material-icons.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.