# Material Icons — 디자인 스타일 가이드
## 기본 정보
- **ID**: material-icons
- **카테고리**: icon-package
## 설명
Google의 Material Design 공식 아이콘 세트입니다. 5가지 테마와 2,000개 이상의 아이콘을 제공합니다.
## 핵심 원칙
- npm install @mui/icons-material
- 번들 사이즈: 개별 import 권장
- 2,100+ 아이콘 (5가지 테마)
## 주요 특징
- 2,100개 이상의 공식 아이콘
- 5가지 테마 (Filled, Outlined, Rounded, Two-tone, Sharp)
- Material Design 가이드라인 준수
- Google 공식 지원
- 다양한 카테고리
## 컬러 시스템 가이드
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 스타일에 종속
## 관련 스타일
- [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)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #2196F3
- secondary: #1976D2
- accent: #64B5F6
- background: #FAFAFA
- surface: #FFFFFF
- text: #212121
- textSecondary: #757575
- border: #E0E0E0
### 헤더
- background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%)
- textColor: #FFFFFF
- accentColor: #64B5F6
### 타이포그래피
- fontFamily: Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 500
- bodyWeight: 400
- letterSpacing: 0.01em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 2px 4px rgba(0,0,0,0.1)
- md: 0 4px 8px rgba(0,0,0,0.15)
- lg: 0 8px 16px rgba(0,0,0,0.2)
- xl: 0 16px 32px rgba(0,0,0,0.25)
### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 16px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E0E0E0
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
### 애니메이션
- duration: 300ms
- easing: cubic-bezier(0.4, 0, 0.2, 1)
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=uppercase
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=border
- 배지: shape=pill / style=solid
- 아이콘: package=material / strokeWidth=2 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Material Icons이란 무엇인가요?
A: Google의 Material Design 공식 아이콘 세트입니다. 5가지 테마와 2,000개 이상의 아이콘을 제공합니다.
### Q: Material Icons의 핵심 디자인 원칙은 무엇인가요?
A: Material Icons의 핵심 원칙은 npm install @mui/icons-material, 번들 사이즈: 개별 import 권장, 2,100+ 아이콘 (5가지 테마)입니다.
### Q: Material Icons은 어떤 프로젝트에 적합한가요?
A: Material Icons은 Material Design 기반 앱, MUI 컴포넌트 라이브러리 사용 시, Android·Google 생태계, Material Design 앱, MUI 기반 프로젝트, Android·Google 생태계 등의 프로젝트에 적합합니다.
### Q: Material Icons의 장단점은 무엇인가요?
A: 장점으로는 Material Design과 완벽 통합, 5가지 테마로 다양한 스타일, Google 공식 지원이 있습니다. 단점으로는 MUI 의존성 생길 수 있음, 번들 사이즈 관리 필요, Material 스타일에 종속이 있습니다.
### Q: Material Icons에서 색상은 어떻게 사용하나요?
A: 5가지 스타일 변형. Material Design 색 시스템과 함께 사용 최적화 색상 역할은 filled: 일반 상태 — currentColor fill, outlined: 비활성 또는 보조 — currentColor stroke, two-tone: 두 색 계층 — primary + alpha 20%입니다. 주의사항: Material Design 외 프로젝트에서 outlined 스타일 권장 (덜 Google스러움), two-tone 사용 시 alpha 색상 일관성.
### Q: Material Icons에 어울리는 폰트 스타일은 무엇인가요?
A: Material Icons에는 아이콘 패키지 — 타이포그래피 해당 없음. Material Icons는 filled/outlined/rounded/sharp/two-tone 5종 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, fill 또는 stroke 변형별 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
### Q: Material Icons 디자인에서 하면 안 되는 것은 무엇인가요?
A: Material Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Material Icons 아이콘을 지나치게 크게 사용 금지 — Material Design 기반 프로젝트 최적화.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=material-icons
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=material-icons&merged=true
Google의 Material Design 공식 아이콘 세트입니다. 5가지 테마와 2,000개 이상의 아이콘을 제공합니다.
Material Icons의 핵심 디자인 원칙은 무엇인가요?
Material Icons의 핵심 원칙은 npm install @mui/icons-material, 번들 사이즈: 개별 import 권장, 2,100+ 아이콘 (5가지 테마)입니다.
Material Icons은 어떤 프로젝트에 적합한가요?
Material Icons은 Material Design 기반 앱, MUI 컴포넌트 라이브러리 사용 시, Android·Google 생태계, Material Design 앱, MUI 기반 프로젝트, Android·Google 생태계 등의 프로젝트에 적합합니다.
Material Icons의 장단점은 무엇인가요?
장점으로는 Material Design과 완벽 통합, 5가지 테마로 다양한 스타일, Google 공식 지원이 있습니다. 단점으로는 MUI 의존성 생길 수 있음, 번들 사이즈 관리 필요, Material 스타일에 종속이 있습니다.
Material Icons에서 색상은 어떻게 사용하나요?
5가지 스타일 변형. Material Design 색 시스템과 함께 사용 최적화 색상 역할은 filled: 일반 상태 — currentColor fill, outlined: 비활성 또는 보조 — currentColor stroke, two-tone: 두 색 계층 — primary + alpha 20%입니다. 주의사항: Material Design 외 프로젝트에서 outlined 스타일 권장 (덜 Google스러움), two-tone 사용 시 alpha 색상 일관성.
Material Icons에 어울리는 폰트 스타일은 무엇인가요?
Material Icons에는 아이콘 패키지 — 타이포그래피 해당 없음. Material Icons는 filled/outlined/rounded/sharp/two-tone 5종 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, fill 또는 stroke 변형별 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
Material Icons 디자인에서 하면 안 되는 것은 무엇인가요?
Material Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Material Icons 아이콘을 지나치게 크게 사용 금지 — Material Design 기반 프로젝트 최적화.