Material Icons 사용 가이드

이 프로젝트에서는 Google Material Icons를 사용합니다.
아이콘 폰트 두 종류가 로드되어 있으며, 사용 가능한 아이콘 이름과 공식 목록 링크를 정리했습니다.

---

1. 로드된 아이콘 폰트

index.html에서 다음 스타일시트를 로드합니다.

폰트	링크	CSS 클래스	용도
Material Icons Round	https://fonts.googleapis.com/icon?family=Material+Icons+Round	material-icons-round	대부분의 UI 아이콘
Material Symbols Outlined	https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0	material-symbols-outlined	관리자 패널 등 일부

---

2. 사용 방법

Material Icons Round (기본)

<span class="material-icons-round">아이콘_이름</span>

아이콘 이름은 소문자 + 밑줄 형식입니다 (예: arrow_back, expand_more).

Material Symbols Outlined

<span class="material-symbols-outlined">아이콘_이름</span>

---

3. 프로젝트에서 사용 중인 아이콘 목록

아래는 코드에서 실제로 사용 중인 아이콘 이름입니다.
새 아이콘을 쓸 때는 공식 사이트에서 이름을 확인한 뒤, 동일한 형식으로 사용하면 됩니다.

Material Icons Round (사용 중인 이름)

아이콘 이름	비고
add	추가 버튼 등
add_circle_outline	추가/신규
admin_panel_settings	관리자 메뉴
app_registration	앱 등록
arrow_back	뒤로 가기
arrow_downward	다운로드/인바운드
arrow_forward_ios	외부/다음 링크
arrow_upward	상승/아웃바운드
auto_stories	저장 카드 플레이스홀더(동적)
backpack	도감 카드
bakery_dining	빵/아이템
block	차단/금지
build	점검/유지보수 배너
build_circle	점검 페이지
bug_report	오류 제보/버그
calculate	계산기
calendar_today	날짜
campaign	공지/알림
chat	채팅/문의
check_circle	성공/완료
chevron_right	다음/상세
close	닫기
code	디바이스: Curl(동적)
compare_arrows	네트워크 트래픽
contact_support	도움말 패널
dashboard	대시보드/홈 카드
database	DB 상태
delete	삭제
delete_forever	계정 삭제
description	문서
desktop_windows	디스플레이 설정
dns	시스템 리소스
download	다운로드
edit	수정
edit_note	수양록 카드
emoji_events	프로필 편집
error_outline	에러
expand_more	드롭다운/펼치기
face	캐릭터
favorite	즐겨찾기
fiber_manual_record	라이브/펄스
file_download	파일 다운로드
filter_list	필터
folder_open	폴더
group_work	팀 빌더/그룹
groups	그룹
help	도움말
history	기록/히스토리
history_edu	변경 내역
home	홈
info	정보
language	언어 설정
link	링크
list_alt	목록(Admin 사이드바)
lock_reset	비밀번호 재설정
lock_clock	세션/잠금
login	로그인
logout	로그아웃
menu	햄버거 메뉴
menu_book	가이드/도움말
memory	메모리
military_tech	프로필 편집
more_horiz	더보기(가로)
more_vert	더보기(세로)
notifications	알림
notifications_active	알림 활성
open_in_new	새 탭/외부 링크
palette	강조 색상
park	도감 카드
people	사용자
person	내 정보/프로필
person_add	가입/추가(동적)
phonelink_lock	2단계 인증/기기
photo_camera	사진/아바타
policy	정책
psychology	프로필 편집
public_off	DDoS 등(동적)
refresh	새로고침
restore	복원
save	저장
save_alt	내보내기
schedule	스케줄
science	연구
search	검색
security	보안
settings	설정
settings_backup_restore	백업(동적)
shield	보안(동적)
stars	요약/별
storage	디스크
support_agent	1:1 문의
translate	다국어
travel_explore	검색/탐색
trending_up	상승/활동
tune	설정/튜닝
upload	업로드
upgrade	업그레이드
verified	인증
verified_user	보안(동적)
visibility	보기
vpn_key	API 키
view_carousel	배너(Admin 사이드바)
warning	경고
water_drop	리소스

동적/데이터에서만 사용되는 이름

• Admin 사이드바: dashboard, people, dns, list_alt, campaign, history_edu, support_agent, view_carousel, settings, security, admin_panel_settings, history, backup, translate
• Admin 접속 로그: desktop_windows, code, smartphone, laptop_mac, smart_toy (deviceIcon)
• Admin 이벤트/알림: login, warning, settings_backup_restore, person_add, shield, vpn_key, verified_user, public_off
• MyInfo 저장 카드: calculate, auto_stories (placeholderIcon)

Material Symbols Outlined (사용 중인 이름)

아이콘 이름	비고
admin_panel_settings	홈 – 관리자 메뉴 버튼

---

4. 전체 아이콘 목록 확인 (공식)

프로젝트에 없는 아이콘도 같은 이름 규칙으로 사용할 수 있습니다.
이름은 공식 사이트에서 검색·확인하는 것이 가장 정확합니다.

• Material Icons (Round 포함)
  https://fonts.google.com/icons?icon.set=Material+Icons

  • 상단에서 Round 스타일 선택 후 검색/찾기

• Material Symbols (Outlined)
  https://fonts.google.com/icons?icon.set=Material+Symbols

  • Outlined 스타일 선택 후 검색/찾기

각 아이콘 페이지에서 이름(name) 값을 그대로 <span> 안에 넣으면 됩니다 (예: arrow_back).

---

5. 참고

• 아이콘 이름은 반드시 소문자 + 밑줄 (snake_case)입니다.
• 새 아이콘 추가 시 위 공식 사이트에서 이름을 확인한 뒤, material-icons-round 또는 material-symbols-outlined 클래스와 함께 사용하면 됩니다.
• 이 문서의 목록은 현재 코드 기준으로 수집된 것이므로, 추가/변경 시 이 문서를 함께 갱신하면 유지보수에 도움이 됩니다.