Files
2nd/10_Wiki/Topic_Programming/Topic_CSS/CSS_Icons_Google.md
T
Antigravity Agent e9cbf23ab5 docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합
이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영.

- Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들
  (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거.
- Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/
  Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/
  Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이
  존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존).
- Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/
  JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동.
- 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리.
- Topic_Programming 최종 문서 수: 2784 → 3985.
2026-07-05 00:39:13 +09:00

4.0 KiB

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit
id title category status verification_status canonical_id aliases duplicate_of source_trust_level confidence_score created_at updated_at review_reason merge_history tags raw_sources applied_in github_commit
css-icons-google CSS Icons Google Frontend draft conceptual
Google icons
Material Icons
Google Material Icons
CSS icons
material-icons
B 0.88 2026-06-23 2026-06-23
css
web
frontend
w3schools
icons
google
material-icons
https://www.w3schools.com/css/css_icons_google.asp

CSS Icons Google

🎯 한 줄 통찰 (One-line insight)

Google Material Icons can be added by linking the Material Icons stylesheet in the <head> and placing <i class="material-icons"> elements whose text content is the icon name — no download or installation required. [S1]

🧠 핵심 개념 (Core concepts)

  • Icon library approach — icons can be added from the Google Material Icons library. [S1]
  • Stylesheet-based — to use the Google icons, add the Material Icons stylesheet link inside the <head> section. [S1]
  • No installation — no downloading or installation is required. [S1]

🧩 추출된 패턴 (Extracted patterns)

  • Stylesheet link in head — reference the Google Material Icons font stylesheet in <head>. [S1]
  • Name-as-text-content — each icon uses the material-icons class on an <i> element with the icon name placed as the text content (e.g. cloud, favorite). [S1]

📖 세부 내용 (Details)

Google Icons — to use the Google icons, add the following line inside the <head> section of your HTML page: [S1]

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

Note: No downloading or installation is required! [S1]

Example — adding Google Material Icons: [S1]

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

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

Each icon is rendered by an <i> element with the material-icons class, and the icon name (e.g. cloud, favorite, attachment, computer, traffic) is placed as the text content of the tag. For the complete set of icons, the page refers readers to its Icon Tutorial. [S1]

🛠️ 적용 사례 (Applied in summary)

The page's own example renders five Material Icons (cloud, favorite, attachment, computer, traffic) by linking the Google stylesheet and adding inline <i class="material-icons"> elements. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Single Google Material icon (language: HTML):

<i class="material-icons">cloud</i>

Required head reference:

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

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

검증 상태 및 신뢰도

  • 상태: draft
  • 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
  • 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
  • 신뢰 점수: 0.88
  • 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

📚 출처 (Sources)

📝 변경 이력 (Change history)

  • 2026-06-23: Initial draft synthesized from the W3Schools "CSS Icons Google" page (Astra wiki-curation, P-Reinforce v3.1 format).