--- id: css-icons-google title: "CSS Icons Google" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["Google icons", "Material Icons", "Google Material Icons", "CSS icons", "material-icons"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.88 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["css", "web", "frontend", "w3schools", "icons", "google", "material-icons"] raw_sources: ["https://www.w3schools.com/css/css_icons_google.asp"] applied_in: [] github_commit: "" --- # [[CSS Icons Google]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) Google Material Icons can be added by linking the Material Icons stylesheet in the `` and placing `` 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 `` 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 ``. [S1] - **Name-as-text-content** β€” each icon uses the `material-icons` class on an `` 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 `` section of your HTML page: [S1] ```html ``` **Note:** No downloading or installation is required! [S1] **Example β€” adding Google Material Icons:** [S1] ```html cloud favorite attachment computer traffic ``` Each icon is rendered by an `` 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 `` elements. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Single Google Material icon (language: HTML): ```html cloud ``` Required head reference: ```html ``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (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) - **μƒμœ„/루트:** [[CSS Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[CSS Icons Font Awesome]], [[CSS Icons Bootstrap]], [[CSS Fonts]] - **μ°Έμ‘° λ§₯락:** Referenced when adding Material Design icons to a page via the Google fonts stylesheet. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” CSS Icons Google β€” https://www.w3schools.com/css/css_icons_google.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "CSS Icons Google" page (Astra wiki-curation, P-Reinforce v3.1 format).