Apa itu Simbol Material?
Simbol Material adalah ikon terbaru kami, yang mengonsolidasikan lebih dari 2.500 glyph dalam {i>file<i} {i>font<i} tunggal dengan berbagai macam varian desain. Simbol tersedia di 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} 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 yang terisi penuh. Bersama dengan berat , isian juga akan mempengaruhi tampilan ikon.
wght sumbu
Bobot mendefinisikan bobot goresan simbol, dengan rentang bobot antara tipis (100) dan tebal (700). Berat juga bisa memengaruhi ukuran keseluruhan simbol.
GRAD sumbu
Bobot dan gradasi memengaruhi ketebalan simbol. Penyesuaian nilai adalah lebih terperinci daripada penyesuaian berat dan memiliki dampak kecil pada ukuran simbol.
Nilai juga tersedia dalam beberapa font teks. Anda dapat mencocokkan tingkat kelas antara teks dan simbol untuk efek visual yang harmonis. Misalnya, jika {i>font <i}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 derajat): Untuk mengurangi pantulan cahaya simbol terang pada tempat gelap latar belakang, gunakan nilai 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 di bagian Lisensi Apache Versi 2.0.
Menjelajahi dan mendownload masing-masing ikon
Kumpulan lengkap Simbol Material tersedia dari Library Simbol Material dalam format SVG atau PNG. Aplikasi tersebut cocok untuk web, Android, dan iOS, atau dengan peralatan desainer.
Repositori Git
Tujuan 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 menyertakan Simbol Material ke dalam proyek web.
Ikon-ikon dikemas dalam satu {i>font<i} sehingga pengembang web dapat dengan mudah menggabungkan ikon-ikon ini hanya dengan beberapa baris kode.
Font statis dengan Google Fonts
Cara termudah untuk mengatur {i>font<i} ikon untuk digunakan di laman 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 angka 400, ukuran optik pada usia 48 tahun, nilai pada angka 0 dan isi (juga 0.)
Gunakan Font 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. Periksa
Dukungan Font Variabel Dapatkah Saya Menggunakan
untuk memahami apakah pengguna Anda akan dapat
memuat {i>font<i} variabel, paling banyak
kemungkinan besar
hal itu. Berikut beberapa contohnya:
Atau bahkan animasikan mereka!
Menghosting font sendiri
Menghosting
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 di atas menggunakan
fitur tipografi yang disebut
ligatur,
yang memungkinkan rendering glyph ikon hanya dengan menggunakan nama tekstual. Tujuan
{i>browser<i} web secara otomatis mengganti ligatur teks dengan vektor ikon dan
menyediakan 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 dukungan ligatur 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 titik kode pada Library Simbol Material dengan memilih ikon apa pun dan membuka panel font ikon. Setiap font ikon memiliki indeks codepoint di Google Fonts repositori git yang menunjukkan rangkaian nama dan kode karakter yang lengkap.
Menata gaya ikon di Desain Material
Ikon-ikon ini dirancang untuk mengikuti Panduan Desain Material, dan mereka terlihat paling baik jika menggunakan ukuran dan warna ikon yang direkomendasikan. Gaya di bawah ini memudahkan penerapan ukuran, warna, dan status aktivitas yang kami rekomendasikan.
Gunakan di Android
Di Library Simbol Material, semua ikon dalam format Vector Drawable. Kepada pelajari lebih lanjut, lihat Dokumentasi Android Vector Asset Studio.
Gunakan di iOS
Ikon ini juga tersedia dalam format Simbol Apple. Untuk mempelajari lebih lanjut, lihat Simbol Apple resmi ringkasan dan panduan penggunaan.
Gunakan di Flutter
Dukungan Flutter untuk Simbol Material telah direncanakan. Ikuti terus info terbarunya.