Apa itu Simbol Material?
Simbol Material adalah ikon terbaru kami, yang menggabungkan lebih dari 2.500 glyph dalam satu file font dengan berbagai varian desain. Simbol tersedia dalam tiga gaya dan empat sumbu font variabel yang dapat disesuaikan (isi, ketebalan, gradasi, dan ukuran optik). Lihat kumpulan lengkap Simbol Material di Library Simbol Material.
Sumbu FILL
{i>Fill<i} memberi Anda kemampuan untuk mengubah gaya ikon default. Satu ikon dapat merender status tidak terisi dan terisi.
Untuk menyampaikan transisi status, gunakan sumbu isian untuk animasi atau interaksi. Nilainya adalah 0 untuk default atau 1 untuk diisi sepenuhnya. Bersama dengan sumbu ketebalan, isian juga memengaruhi tampilan ikon.
Sumbu wght
Bobot menentukan ketebalan goresan simbol, dengan rentang ketebalan antara tipis (100) dan tebal (700). Ketebalan juga dapat memengaruhi ukuran keseluruhan simbol.
Sumbu GRAD
Bobot dan gradasi memengaruhi ketebalan simbol. Penyesuaian pada gradasi lebih terperinci daripada penyesuaian pada ketebalan dan memiliki dampak kecil pada ukuran simbol.
Grade juga tersedia di beberapa font teks. Anda dapat mencocokkan tingkat kelas antara teks dan simbol untuk efek visual yang harmonis. Misalnya, jika font teks memiliki nilai grade -25, simbol dapat mencocokkannya dengan nilai yang sesuai, misalnya -25.
Anda dapat menggunakan nilai untuk berbagai kebutuhan:
Penekanan rendah (misalnya, grade -25): Untuk mengurangi silau pada simbol terang dengan latar belakang gelap, gunakan grade rendah.
Penekanan tinggi (misalnya 200 nilai): Untuk menandai simbol, tingkatkan nilai positif nilai.
opsz sumbu
Ukuran optik berkisar dari 20 dp hingga 48 dp.
Agar gambar terlihat sama pada berbagai ukuran, ketebalan goresan (ketebalan) berubah seiring dengan skala ukuran ikon. Ukuran optik menawarkan cara untuk secara otomatis menyesuaikan ketebalan goresan saat Anda menambah atau mengurangi ukuran simbol.
Mendapatkan Simbol Material
Simbol Material tersedia dalam beberapa format dan cocok untuk berbagai jenis project dan platform, baik untuk developer di aplikasi mereka maupun untuk desainer dalam maket atau prototipe mereka.
Pemberian Lisensi
Simbol Material tersedia berdasarkan Apache License Version 2.0 .
Menjelajahi dan mendownload masing-masing ikon
Kumpulan lengkap Simbol Material tersedia dari Pustaka Simbol Material dalam format SVG atau PNG. Alat ini cocok untuk web, Android, dan iOS, atau dengan alat desainer apa pun.
Repositori Git
Repositori git berisi kumpulan lengkap Simbol Material dalam format SVG.
$ git clone https://github.com/google/material-design-icons
Menggunakan Simbol Material
Penggunaan di Web
Font Simbol Material adalah cara termudah untuk menyertakan Simbol Material ke dalam proyek web.
Ikon dikemas ke dalam satu font sehingga developer web dapat dengan mudah memasukkan ikon ini hanya dengan beberapa baris kode.
Font statis dengan Google Fonts
Cara termudah untuk menyiapkan font ikon untuk digunakan di halaman web mana pun adalah melalui Google Fonts. Sertakan satu baris HTML ini:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Cuplikan di atas menyertakan konfigurasi default untuk setiap sumbu , dengan bobot pada 400, ukuran optik pada 48, grade pada 0, dan isi (juga 0.)
Gunakan Fonts CSS API untuk mengonfigurasi nilai sumbu yang berbeda. Lihat contoh berikut:
Font variabel dengan Google Fonts
Jika Anda menganimasikan ikon melalui CSS, atau menginginkan kontrol yang lebih baik atas fitur ikon, gunakan
font variabel Simbol Google. Dengan menggunakan rentang, dalam format number..number,
kita dapat memuat seluruh font variabel. Lihat Font Variabel yang Bisa Saya Gunakan
tim dukungan
untuk memahami apakah pengguna Anda akan dapat
memuat {i>font<i} variabel, paling banyak
kemungkinan besar
hal itu. Berikut beberapa contohnya:
Atau bahkan menganimasikannya.
Mengoptimalkan font ikon
Buat subkumpulan font untuk hanya menyertakan ikon yang relevan untuk aplikasi Anda menggunakan parameter kueri
&icon_names, menggunakan daftar nama ikon (ligatur) yang dipisahkan koma dan diurutkan menurut abjad.Tidak direkomendasikan — Menggunakan default memuat 3.800+ ikon. Payload font: 295 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+OutlinedDirekomendasikan — Menentukan nama ikon untuk memuat ikon yang diperlukan saja. Payload font: 1,7 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=blockBuat instance sumbu font variabel untuk hanya menyertakan sumbu font yang digunakan aplikasi Anda gunakan. Sebagian besar aplikasi hanya memerlukan beberapa variasi sumbu.
Tidak direkomendasikan — Konfigurasi sumbu tidak memuat default font statis (berat 400, ukuran optik 24, bulat 50, kelas 0, isi 0). Menyertakan semua sumbu font variabel secara penuh biasanya tidak diperlukan dan akan meningkatkan payload. Payload font: 7,9 MB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100Direkomendasikan — Kombinasi sumbu tertentu digunakan. Sebagai contoh, sumbu 'ISI' penuh memberikan transisi CSS antar-status, dan 'ROND' 100 adalah desain yang dipilih. Payload font: 2,6 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
Menghosting font sendiri
Hosting font
ikon
di lokasi yang Anda kontrol, untuk memutuskan kapan harus memperbarui aset. Sebagai
contoh jika URL-nya adalah https://example.com/material-symbols.woff, tambahkan
aturan CSS berikut:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Untuk merender font dengan benar, deklarasikan aturan CSS untuk merender ikon. Ini aturan biasanya disajikan sebagai bagian dari stylesheet Google Fonts API, tetapi harus disertakan secara manual dalam project Anda saat menghosting mandiri:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Menggunakan ikon di HTML
Contoh yang diberikan di atas menggunakan fitur tipografi yang disebut
ligatur
, yang memungkinkan rendering glyph ikon menggunakan nama tekstualnya. Browser
web secara otomatis mengganti ligatur teks dengan vektor ikon dan
memberikan kode yang lebih mudah dibaca daripada referensi karakter numerik yang setara. Sebagai
misalnya, di HTML, Anda akan memiliki arrow_forward untuk mewakili ikon,
bukan . Untuk ikon lain, gunakan snake case dari nama ikon
(misalnya, ganti spasi dengan garis bawah).
Fitur ini didukung di sebagian besar browser modern di desktop dan seluler perangkat. Lihat Dapatkah Saya Menggunakan ligatur tim dukungan untuk melihat apakah pengguna Anda dapat memproses ligatur, kemungkinan besar mereka bisa.
Jika Anda perlu mendukung browser yang tidak mendukung ligatur, tentukan ikon menggunakan referensi karakter numerik (alias titik kode) seperti contoh di bawah ini:
Temukan nama ikon dan kode titik di Library Simbol Material dengan memilih ikon apa pun dan membuka panel font ikon. Setiap font ikon memiliki indeks codepoint di Google Fonts git repositori yang menunjukkan rangkaian nama dan kode karakter yang lengkap.
Menata gaya ikon di Desain Material
Ikon ini didesain untuk mengikuti panduan Desain Material, dan terlihat paling baik saat menggunakan ukuran dan warna ikon yang direkomendasikan. Gaya di bawah memudahkan Anda menerapkan ukuran, warna, dan status aktivitas yang direkomendasikan.
Gunakan di Android
Di Library Simbol Material, semua ikon dalam format Vector Drawable. Kepada pelajari lebih lanjut, lihat panduan Android Vector Asset Studio dokumentasi tambahan.
Gunakan di iOS
Ikon ini juga tersedia dalam format Simbol Apple. Untuk mempelajarinya lebih lanjut, lihat ringkasan dan panduan penggunaan Simbol Apple resmi.
Penggunaan di Flutter
Dukungan Flutter untuk Simbol Material sedang direncanakan. Ikuti terus info terbarunya.