material design icons

Simbol Material / Ikon Material

Ini adalah dua kumpulan ikon resmi berbeda dari Google, menggunakan desain dasar yang sama. Simbol Material adalah kumpulan terkini, diperkenalkan pada April 2022, dibuat berdasarkan teknologi font variabel. Ikon Material adalah set klasik, tetapi tidak lagi diperbarui. Lebih detailnya di bawah ini.

Ikon dapat dijelajahi dengan cara yang lebih ramah pengguna di https://fonts.google.com/icons. Gunakan menu popdown di dekat kiri atas untuk memilih di antara dua set; Simbol Material adalah defaultnya.

Ikon dirancang berdasarkan pedoman desain material.

Permintaan Ikon

Kami ingin mendukung kebutuhan ikon Anda! Silakan kirimkan permintaan Anda di sini di GitHub sebagai masalah.

Harap perhatikan bahwa Google Font tidak menerima kiriman pengguna atas desain ikon yang sudah jadi! Ada pedoman yang cukup ketat untuk ikon Material, ditambah lagi Google memiliki file sumber upstream dari mana repo ini dihasilkan. Oleh karena itu, Google tidak menerima permintaan penarikan untuk file ikon (baik saran ikon baru, atau perbaikan untuk ikon yang sudah ada). Konsep dihargai—hanya saja jangan mendesain SVG dan mengirimkannya melalui permintaan tarik.

Namun, pengguna diperkenankan untuk menunjuk file atau gambar luar sebagai contoh—untuk hal yang mereka inginkan, namun tidak akan dianggap “sebagaimana adanya”. Ini bekerja dengan baik terutama jika Anda memiliki banyak contoh untuk satu ikon, untuk membantu kami memahami “esensi” ide tersebut.

Misalnya, ada logo/ikon konseptual yang cukup universal untuk “agender”, jadi jika Anda mengusulkan Google untuk menambahkan ikon agender dalam gaya Material, sebutkan atau arahkan ke https://www.google.com/search ?q=agender+icon akan menjadi tip yang bermanfaat.

Logo pihak ketiga

Saat ini, Google tidak menyertakan logo pihak ketiga di antara Simbol Material atau Ikon Material karena alasan hukum. Beberapa logo pihak ketiga yang sebelumnya disertakan telah dihapus.

Paket npm

Google saat ini tidak memelihara paket npm untuk repo ini, setelah v3 (2016). Namun, pengguna @marella menghosting yang berikut ini. Dia memberi tahu kami bahwa ini secara otomatis diperbarui dan dipublikasikan menggunakan GitHub Actions. Catatan: Google tidak memantau atau memeriksa paket ini.

simbol material

• Hanya font variabel WOFF2 dan CSS untuk Simbol Material
• Mencakup ikon bergaris tepi, bulat, dan tajam serta semua variasi isi, berat, tingkatan, dan ukuran optik
• Mendukung Sass

ikon material

• Hanya WOFF2, font WOFF dan CSS
• Termasuk ikon bergaris, bulat, tajam, dan dua warna
• Mendukung Sass

@bahan-desain-ikon/font

• Hanya font WOFF2 dan CSS
• Versi paket material-icons yang lebih ringan
• Tidak mendukung browser lama seperti Internet Explorer karena menjatuhkan WOFF (v1)

@bahan-desain-ikon/svg

• Hanya SVG
• Mengoptimalkan SVG menggunakan SVGO

Simbol Materi

Ikon-ikon baru ini dapat dijelajahi dengan cara yang lebih ramah pengguna di https://fonts.google.com/icons. Gunakan menu popdown di dekat kiri atas untuk memilih di antara dua set; Simbol Material adalah defaultnya.

Ikon-ikon ini dibuat/dirancang sebagai font variabel terlebih dahulu (berdasarkan desain 24 px dari Material Icons). Ada tiga font variabel Simbol Material terpisah, yang juga memiliki ikon statis (tetapi tidak semua variasi tersedia, karena akan ada ratusan gaya):

• Diuraikan
• Bulat
• Tajam
• Perhatikan bahwa meskipun tidak ada font Terisi yang terpisah, sumbu Isi memungkinkan akses ke gaya terisi, di ketiga font tersebut. Itu juga dapat dimanipulasi untuk efek pengisian animasi, untuk menunjukkan pilihan pengguna.

Masing-masing font memiliki sumbu desain berikut, yang dapat divariasikan dalam CSS, atau di banyak aplikasi desain modern lainnya:

• Ukuran Optik (opsz) dari 20 hingga 48 piksel. Standarnya adalah 24.
• Berat dari 100 (Tipis) hingga 700 (Tebal). Reguler adalah 400.
• Nilai dari -50 hingga 200. Standarnya adalah 0 (nol). -50 disarankan untuk kontras terbalik (misalnya ikon putih dengan latar belakang hitam)
• Isi dari 0 sampai 100. Defaultnya adalah 0 (nol).

Direktori berikut dalam repo ini berisi konten Simbol Material (bukan Ikon Material) khusus:

• simbol
• font variabel

Apa yang saat ini tidak tersedia di Simbol Material?

• hanya versi 20 dan 24 px yang dirancang dengan penyelarasan grid piksel yang sempurna
• satu-satunya font yang sudah jadi adalah font variabel
• tidak ada ikon dua warna

Ikon Bahan

Ikon dapat dijelajahi dengan cara yang lebih ramah pengguna di https://fonts.google.com/icons?icon.set=Material+Icons

Ikon klasik ini tersedia dalam lima gaya berbeda:

• Diuraikan
• Terisi (versi font disebut Material Icons, karena ini adalah gaya tertua)
• Bulat
• Tajam
• Dua nada

Direktori berikut dalam repo ini berisi konten Ikon Material (bukan Simbol Material):

• android
• font
• ios
• png
• src

Apa yang saat ini tidak tersedia di Ikon Material?

• font variabel
• bobot selain Reguler
• nilai selain Reguler
• sarana untuk menganimasikan transisi Isi
• ikon baru (karena pembaruan dihentikan pada tahun 2022)

Riwayat pembaruan Ikon Material

4.0.0 Pembaruan

• 31 Agustus 2020
• Repositori yang direstrukturisasi, aset yang diperbarui.

3.0.1 Pembaruan

• 01 September 2016
• Mengubah lisensi di package.json.
• Menambahkan sprite simbol perangkat yang hilang.

3.0.0 Pembaruan

• 25 Agustus 2016
• Perubahan lisensi ke Apache 2.0!

2.0

• 28 Mei 2016

Memulai

Baca panduan pengembang tentang cara menggunakan ikon desain material dalam proyek Anda.

Menggunakan font

Folder font dan variablefont berisi file font yang dibuat sebelumnya yang dapat disertakan dalam sebuah proyek. Hal ini sangat berguna untuk web; namun, secara umum lebih baik menautkan ke font web yang dihosting di Google Font:

 < link href =" https://fonts.googleapis.com/css2?family=Material+Icons "
      rel =" stylesheet " > 

 < link href =" https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined "
      rel =" stylesheet " >

Baca selengkapnya tentang Simbol Material atau Ikon Material di panduan pengembang Google Fonts.

Lisensi

Kami telah menyediakan ikon-ikon ini untuk Anda masukkan ke dalam produk Anda di bawah Lisensi Apache Versi 2.0. Jangan ragu untuk me-remix dan membagikan ulang ikon dan dokumentasi ini di produk Anda. Kami ingin atribusi di layar tentang aplikasi Anda, namun itu tidak wajib.