version: "1.0.0" name: material-design-icons description: Dipakai saat Zeline membuat, mendesain, atau merevisi UI (HTML, React, Vue, Next.js, Telegram Mini App, dsb.) agar menggunakan ikon resmi dari Google Material Design Icons / Material Symbols. category: frontend

Material Design Icons Standard

Dipakai saat Zeline membuat, mendesain, atau merevisi UI (HTML, React, Vue, Next.js, Telegram Mini App, dsb.) agar menggunakan ikon resmi dari Google Material Design Icons / Material Symbols.

Overview

Repo resmi: google/material-design-icons (Google Material Symbols & Icons). Skill ini memastikan konsistensi ikonografi di seluruh artefak UI yang dihasilkan Zeline.

Standard Implementation Rules

1. Web Statis & Prototyping (HTML/CSS Vanilla)

Selalu tambahkan stylesheet Material Symbols ke <head>:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Gunakan kelas material-symbols-outlined dengan teks nama ikon di dalam tag:

<!-- Contoh penggunaan dasar -->
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">account_circle</span>

2. React / Next.js Projects

Gunakan paket @mui/icons-material atau SVG React components jika menggunakan NPM:

npm install @mui/icons-material @mui/material @emotion/react @emotion/styled

import SearchIcon from '@mui/icons-material/Search';
import SettingsIcon from '@mui/icons-material/Settings';
<SearchIcon />
<SettingsIcon />

3. Inline SVG (Offline / No External CDN)

Jika project melarang CDN eksternal atau offline, gunakan elemen <svg> inline dengan viewBox 0 0 24 24 yang diambil dari SVG resmi repo google/material-design-icons.

Styling & Variant Guide

1. Size Tuning (Font-size & Opsz):

``css .material-symbols-outlined { font-size: 24px; vertical-align: middle; user-select: none; } ``

1. Filled vs Outlined:

Untuk ikon aktif/selected, gunakan CSS variation settings: ``css .material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } ``

1. Warna & Accessibility:

Ikon mewarisi color dari elemen induknya (currentColor). Selalu pastikan kontras cukup dan berikan aria-label jika ikon berdiri sendiri tanpa teks tombol.

Common Icon Names Reference

• Actions: search, settings, delete, edit, add, close, check, refresh, download, share, more_vert, more_horiz
• Navigation: arrow_back, arrow_forward, chevron_right, expand_more, menu, home
• User & Status: account_circle, person, notifications, verified, error, info, warning, help
• Media & Web: image, videocam, link, code, content_copy, file_download