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, nilai, dan ukuran optik). Lihat kumpulan lengkap Simbol Material di Library Simbol Material.
FILL sumbu
{i>Fill<i} memungkinkan Anda untuk mengubah gaya ikon default. Satu ikon dapat merender status tidak terisi dan terisi.
Untuk menyampaikan transisi keadaan, gunakan sumbu isian untuk animasi atau interaksi. Nilainya adalah 0 untuk {i>default<i} atau 1 untuk terisi penuh. Bersama dengan sumbu bobot, isian juga memengaruhi tampilan ikon.
wght sumbu
Bobot menentukan ketebalan goresan simbol, dengan rentang ketebalan antara tipis (100) dan tebal (700). Bobot juga dapat memengaruhi ukuran simbol secara keseluruhan.
GRAD sumbu
Bobot dan gradasi memengaruhi ketebalan simbol. Penyesuaian nilai lebih terperinci daripada penyesuaian bobot dan memiliki dampak kecil pada ukuran simbol.
Nilai juga tersedia di beberapa font teks. Anda dapat mencocokkan tingkat kelas antara teks dan simbol untuk mendapatkan efek visual yang harmonis. Misalnya, jika font teks memiliki nilai kelas -25, simbol dapat mencocokkannya dengan nilai yang sesuai, misalnya -25.
Anda dapat menggunakan nilai untuk berbagai kebutuhan:
Penekanan rendah (misalnya, -25 tingkat): Untuk mengurangi pantulan cahaya simbol terang pada latar belakang gelap, gunakan tingkat rendah.
Penekanan tinggi (misalnya, nilai 200): Untuk menandai simbol, naikkan nilai positif.
opsz sumbu
Ukuran optik berkisar dari 20 dp hingga 48 dp.
Agar gambar terlihat sama pada ukuran yang berbeda, ketebalan goresan (ketebalan) akan berubah seiring skala ukuran ikon. Ukuran optik menawarkan cara untuk 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 di maket atau prototipe mereka.
Pemberian (hak) lisensi
Simbol Material tersedia berdasarkan Lisensi Apache Versi 2.0.
Menjelajahi dan mendownload ikon satu per satu
Kumpulan lengkap Simbol Material tersedia dari Material Symbols Library dalam format SVG atau PNG. Aplikasi 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
Gunakan di Web
Font Simbol Material adalah cara termudah untuk menggabungkan Simbol Material ke dalam project web.
Ikon-ikon tersebut dikemas ke dalam satu font sehingga developer web dapat dengan mudah menggabungkan ikon-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 di 48, grade pada 0, dan fill (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
dukungan Font Variabel Dapatkah Saya Menggunakan
untuk memahami apakah pengguna akan dapat memuat font variabel, kemungkinan besar. Berikut beberapa contohnya:
Atau bahkan animasikan!
Menghosting sendiri font
Hosting font ikon di lokasi yang Anda kontrol untuk memutuskan kapan aset diperbarui. Misalnya, 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. Aturan ini biasanya ditayangkan sebagai bagian dari stylesheet Google Fonts API, tetapi harus disertakan secara manual dalam project Anda saat di-hosting sendiri:
.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 ligature, yang memungkinkan rendering glyph ikon hanya dengan 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. Misalnya,
di HTML, Anda akan memiliki arrow_forward untuk mewakili ikon,
bukan . Untuk ikon lainnya, gunakan snake case dari nama ikon
(yaitu ganti spasi dengan garis bawah).
Fitur ini didukung di sebagian besar browser modern di perangkat desktop dan seluler. Lihat dukungan ligatur Dapatkah Saya Menggunakan untuk melihat apakah pengguna Anda akan dapat memproses ligatur, kemungkinan besar mereka dapat melakukannya.
Jika perlu mendukung browser yang tidak mendukung ligatur, tentukan ikon menggunakan referensi karakter numerik (alias poin kode) seperti contoh di bawah ini:
Temukan nama ikon dan poin kode di Library Simbol Material dengan memilih ikon apa pun dan membuka panel font ikon. Setiap font ikon memiliki indeks codepoint di repositori git Google Fonts yang menampilkan kumpulan nama dan kode karakter lengkap.
Ikon gaya visual di Desain Material
Ikon ini dirancang untuk mengikuti pedoman Desain Material, dan akan terlihat paling bagus saat menggunakan ukuran dan warna ikon yang direkomendasikan. Gaya di bawah ini memudahkan penerapan ukuran, warna, dan status aktivitas yang direkomendasikan.
Gunakan di Android
Di Material Symbols Library, semua ikon menggunakan format Vector Drawable. Untuk mempelajari lebih lanjut, lihat dokumentasi Android Vector Asset Studio.
Penggunaan di iOS
Ikon tersebut juga tersedia dalam format Apple Symbols. Untuk mempelajarinya lebih lanjut, lihat ringkasan dan panduan penggunaan Simbol Apple resmi.
Penggunaan di Flutter
Dukungan Flutter untuk Simbol Material sudah direncanakan. Pantau terus pembaruannya.