Ringkasan ikon material—tempat mendapatkannya dan cara mengintegrasikannya dengan project Anda.
Apa itu ikon material?
Ikon sistem desain material sederhana, modern, ramah, dan terkadang unik. Setiap ikon dibuat menggunakan panduan desain kami untuk menggambarkan konsep universal yang umum digunakan di seluruh UI dalam bentuk yang sederhana dan minimal. Untuk memastikan keterbacaan dan kejelasan baik dalam ukuran besar maupun kecil, ikon-ikon ini telah dioptimalkan untuk memberikan tampilan yang menarik di semua platform dan resolusi layar umum.
Lihat kumpulan ikon desain material lengkap di Library Ikon Material.
Mendapatkan ikon
Ikon ini tersedia dalam beberapa format dan cocok untuk berbagai jenis project dan platform, untuk developer di aplikasi mereka, dan untuk desainer di maket atau prototipe mereka.
Pemberian (hak) lisensi
Kami menyediakan ikon ini agar Anda dapat memasukkannya ke dalam produk berdasarkan Lisensi Apache Versi 2.0. Jangan ragu untuk me-remix dan membagikan kembali ikon dan dokumentasi ini di produk Anda. Kami menginginkan atribusi di layar about aplikasi Anda, tetapi hal ini tidak wajib.
Menjelajahi dan mendownload ikon satu per satu
Kumpulan ikon material lengkap tersedia di library ikon material. Ikon ini tersedia untuk didownload dalam format SVG atau PNG, dengan format yang sesuai untuk project web, Android, dan iOS, atau untuk disertakan dalam alat desainer apa pun.
Mendownload semuanya
Dapatkan arsip zip stabil terbaru (~310 MB) untuk semua ikon atau versi bleeding edge dari master.
Repositori Git
Ikon material tersedia dari repositori git yang berisi kumpulan ikon lengkap, termasuk semua berbagai format yang kami sediakan.
$ git clone https://github.com/google/material-design-icons/
Font ikon untuk web
Font ikon material adalah cara termudah untuk menggabungkan ikon material dengan project web. Kami telah memaketkan semua ikon material ke dalam satu font yang memanfaatkan kemampuan rendering tipografi dari browser modern sehingga developer web dapat dengan mudah menggabungkan ikon-ikon ini hanya dengan beberapa baris kode.
Menggunakan font bukan hanya metode yang paling nyaman, tetapi juga efisien dan terlihat bagus:
- 900+ ikon, semua dari satu file yang kecil.
- Disediakan dari server Google Web Font atau dapat dihosting sendiri.
- Didukung oleh semua browser web modern.
- Diwarnai, disesuaikan ukurannya, dan diposisikan sepenuhnya dengan CSS.
- Berbasis vektor: Terlihat bagus pada semua skala, layar retina, layar dengan dpi rendah.
Font ikon memiliki berat hanya 42KB dalam format woff2 terkecil dan 56KB dalam format woff standar. Sebagai perbandingan, file SVG yang dikompresi dengan gzip umumnya berukuran sekitar 62 KB, tetapi hal ini dapat dikurangi secara signifikan dengan hanya mengompilasi ikon yang Anda perlukan ke dalam satu file SVG dengan simbol sprites.
Metode Penyiapan 1. Menggunakan melalui Google Fonts
Cara termudah untuk menyiapkan font ikon untuk digunakan di halaman web mana pun adalah melalui Google Fonts. Yang perlu Anda lakukan adalah menyertakan satu baris HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Serupa dengan Font Web Google lainnya, CSS yang benar akan ditayangkan untuk mengaktifkan font 'Ikon Material' khusus untuk browser.
Class CSS tambahan akan dideklarasikan bernama .material-icons.
Setiap elemen yang menggunakan class ini akan memiliki CSS yang benar untuk merender ikon ini dari font web.
Metode Penyiapan 2. Hosting mandiri
Bagi yang ingin menghosting sendiri font web, diperlukan beberapa penyiapan tambahan.
Hosting font ikon di lokasi, misalnya https://example.com/material-icons.woff, dan tambahkan aturan CSS berikut:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
Selain itu, aturan CSS untuk merender ikon harus dideklarasikan untuk merender font dengan benar. Aturan ini biasanya ditayangkan sebagai bagian dari stylesheet Google Web Font, tetapi perlu disertakan secara manual dalam project Anda saat menghosting sendiri font:
.material-icons {
font-family: 'Material Icons';
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;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Menggunakan ikon di HTML
Sangat mudah untuk menggabungkan ikon ke dalam halaman web Anda. Berikut adalah contoh kecilnya:
wajah
<span class="material-icons">face</span>
Contoh ini menggunakan fitur tipografi yang disebut ligatur, yang memungkinkan rendering glyph ikon hanya dengan menggunakan nama tekstualnya. Penggantian dilakukan secara otomatis oleh browser web dan memberikan kode yang lebih mudah dibaca daripada referensi karakter numerik yang setara.
Fitur ini didukung di sebagian besar browser modern di desktop dan perangkat seluler.
| Browser | Versi yang mendukung ligatur |
|---|---|
| Google Chrome | 11 |
| Mozilla Firefox | 3.5 |
| Apple Safari | 5 |
| Microsoft IE | 10 |
| Microsoft Edge | 18 |
| Opera | 15 |
| Apple MobileSafari | iOS 4.2 |
| Browser Android | 3.0 |
Untuk browser yang tidak mendukung ligatur, kembali ke menentukan ikon menggunakan referensi karakter numerik seperti contoh di bawah ini:
<span class="material-icons"></span>Temukan nama ikon dan titik kode di library ikon material dengan memilih ikon apa pun dan membuka panel font ikon. Setiap font ikon memiliki indeks poin kode di repositori git kami yang menampilkan kumpulan nama dan kode karakter lengkap (di sini).
Menata gaya ikon dalam desain material
Ikon ini dirancang agar mengikuti pedoman desain material dan akan terlihat sangat bagus jika menggunakan ukuran dan warna ikon yang direkomendasikan. Gaya di bawah memudahkan penerapan ukuran, warna, dan status aktivitas yang direkomendasikan.
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Ukuran
Meskipun ikon dalam font dapat diskalakan ke ukuran apa pun, sesuai dengan pedoman ikon desain material, sebaiknya ikon ditampilkan dalam 18, 24, 36, atau 48 piksel. Default-nya adalah 24px.
Aturan CSS untuk pedoman ukuran desain material standar:
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
Ikon Material terlihat paling baik dalam 24px, tetapi jika ikon perlu ditampilkan dalam ukuran alternatif, penggunaan aturan CSS di atas dapat membantu:
<span class="material-icons md-18">face</span><span class="material-icons md-24">face</span><span class="material-icons md-36">face</span><span class="material-icons md-48">face</span>Mewarnai
Penggunaan {i>font <i}ikon memudahkan penataan gaya ikon dalam warna apa pun. Sesuai dengan pedoman ikon desain material, untuk ikon aktif, sebaiknya gunakan ikon hitam pada opasitas 54% atau putih pada opasitas 100% saat menampilkannya di latar belakang terang atau gelap masing-masing. Jika ikon dinonaktifkan atau tidak aktif, gunakan warna hitam pada 26% atau putih pada 30% untuk latar belakang terang dan gelap.
Berikut beberapa contohnya, menggunakan gaya CSS material yang dijelaskan di atas:
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Contoh untuk menggambar ikon pada latar belakang terang dengan warna latar depan gelap:
<span class="material-icons md-dark">face</span><span class="material-icons md-dark md-inactive">face</span>Contoh untuk menggambar ikon pada latar belakang gelap dengan warna latar depan terang:
<span class="material-icons md-light">face</span><span class="material-icons md-light md-inactive">face</span>Untuk menetapkan warna ikon khusus, tentukan aturan CSS yang menentukan warna font yang diinginkan:
.material-icons.orange600 { color: #FB8C00; }
lalu gunakan class tersebut saat merujuk ke ikon:
<span class="material-icons orange600">face</span>Gambar ikon untuk web
Ikon material juga tersedia sebagai gambar biasa, baik dalam format PNG maupun SVG.
SVG
Ikon material disediakan sebagai SVG yang cocok untuk project web. Setiap ikon dapat didownload dari library ikon material. SVG juga tersedia dari ikon desain material repositori git di jalur:
material-design-icons/src/
Misalnya, ikon untuk peta ada di src/maps:
material-design-icons/src/maps/
Jika ada beberapa ikon yang digunakan di situs web, membuat spritesheet dari gambar direkomendasikan. Untuk informasi selengkapnya, lihat dokumentasi di direktori sprite pada repositori git.
PNG
PNG adalah cara paling tradisional untuk menampilkan ikon di web. Download kita dari library ikon material menyediakan kepadatan tunggal dan ganda untuk setiap ikon. Kedua file tersebut masing-masing disebut sebagai 1x dan 2x dalam download. Ikon juga tersedia di repositori git di bagian:
material-design-icons/png/
Jika ada beberapa ikon yang digunakan di situs web, membuat spritesheet dari gambar direkomendasikan. Untuk informasi selengkapnya, lihat rekomendasi di direktori sprite di repositori git.
Ikon untuk Android
PNG yang cocok untuk Android tersedia di library ikon material. Ini akan tersedia dalam semua kepadatan layar yang didukung sehingga akan terlihat bagus di perangkat apa pun.
Ikon ini juga tersedia di repositori git ikon desain material dalam kombinasi warna dan ukuran yang sama bernama sebagai berikut:
Vector Drawable saat ini hanya tersedia sebagai ikon 24dp hitam. Ini untuk kompatibilitas dengan ukuran ikon kami yang paling standar. Untuk merender ikon dalam warna yang berbeda, gunakan tint drawable yang tersedia di Android Lollipop.
Saat menggunakan Vector Drawable, Anda mungkin tidak perlu menyertakan PNG kepadatan xxxhdpi karena sepertinya perangkat yang mendukung kepadatan layar tersebut tidak mendukung Drawable Vektor.
Ikon untuk iOS
Ikon Material juga berfungsi dengan baik dalam aplikasi iOS. Di library ikon material dan repositori git, ikon ini dikemas dalam set image Xcode yang akan berfungsi dengan mudah dengan Katalog Aset Xcode (xcassets). Kumpulan gambar ini dapat ditambahkan ke Katalog Aset Xcode dengan menariknya ke Xcode ke katalog aset atau dengan menyalin folder ke folder xcasset.
Kumpulan gambar ini berisi gambar dengan kepadatan tunggal, ganda, dan tiga (1x, 2x, 3x) sehingga berfungsi pada semua kepadatan layar iOS yang diketahui. Kedua ikon hitam dan putih disediakan, tetapi sebaiknya gunakan imageWithRenderingMode dari UIImage dengan UIImageRenderingModeAlwaysTemplate yang akan memungkinkan gambar digunakan sebagai mask alfa yang dapat diberi tint ke warna apa pun yang memungkinkan.
Contoh Objective-C:
UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
[[UIImage imageNamed:@"ic_close"]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];
Contoh Swift:
let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)
Ikon dalam RTL
Bahasa seperti Arab dan Ibrani dibaca dari kanan-ke-kiri (RTL). Untuk bahasa RTL, UI harus dicerminkan untuk menampilkan sebagian besar elemen dalam RTL. Saat antarmuka pengguna dicerminkan untuk RTL, beberapa ikon juga harus dicerminkan. Jika teks, tata letak, dan ikon dicerminkan untuk mendukung UI kanan-ke-kiri, apa pun yang berkaitan dengan waktu harus digambarkan sebagai bergerak dari kanan ke kiri. Misalnya, maju menunjuk ke kiri, dan mundur menunjuk ke kanan. Namun, perhatikan bahwa konteks penempatan ikon juga memengaruhi apakah ikon harus dicerminkan atau tidak.
Ikon hanya boleh dicerminkan jika arahnya sesuai dengan elemen UI lainnya dalam mode RTL. Jika sebuah ikon merepresentasikan fitur visual {i>website<i} Anda yang berbeda dalam RTL, ikon tersebut juga harus dicerminkan dalam RTL. Misalnya, jika angka dalam daftar bernomor berada di sisi kanan dalam bahasa RTL, angka tersebut harus berada di sisi kanan ikon yang dicerminkan.
Ikon RTL di Android
Artikel developer Android ini menjelaskan secara mendalam cara menerapkan antarmuka pengguna RTL. Secara default di Android, ikon tidak dicerminkan saat arah tata letak dicerminkan. Anda perlu secara khusus mencerminkan ikon yang sesuai saat diperlukan, baik dengan menyediakan aset khusus untuk bahasa RTL, maupun menggunakan fungsi framework untuk menduplikasi aset.
Untuk menyediakan aset khusus untuk bahasa RTL, Anda dapat menggunakan penentu ldrtl pada direktori resource, seperti res/drawable-ldrtl/. Resource di dalam direktori tersebut hanya akan digunakan untuk bahasa RTL. Untuk perangkat yang menjalankan Android API 19 atau yang lebih baru, framework juga menyediakan atribut autoMirrored untuk Drawable. Jika atribut ini ditetapkan ke true, drawable akan secara otomatis dicerminkan pada bahasa RTL.
Menggunakan autoMirrored:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"
android:tint="?attr/colorControlNormal"
android:autoMirrored="true">
<path
android:fillColor="@android:color/white"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
Jika penggunaan autoMirrored atau menyediakan resource Drawable alternatif tidak dapat digunakan, atribut scaleX ImageView juga dapat digunakan untuk mencerminkan drawable (misalnya, dengan menyediakan tata letak khusus RTL di direktori res/layout-ldrtl).
Pencerminan dalam file tata letak:
<ImageView
android:id="@+id/my_icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:scaleX="-1" />
Terakhir, drawable dapat dicerminkan secara terprogram.
Periksa arah tata letak secara manual menggunakan getLayoutDirection:
if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
// custom code
}
Mencerminkan konten ImageView secara terprogram:
imageView.setScaleX(-1);
Ikon RTL di iOS
iOS memiliki konsep UISemanticContentAttribute yang dilampirkan ke setiap tampilan. Ini dapat berupa unspecified, forceLeftToRight, forceRightToLeft, playback, atau spatial. iOS menggunakan nilai ini dan setelan (left-to-right (LTR)/RTL) dari perangkat yang menampilkan antarmuka untuk menentukan efektifLayoutDirection tampilan. EfektifLayoutDirection ini menentukan apakah akan mencerminkan gambar saat ditampilkan atau tidak.
Secara default, konten semantik gambar disetel ke unspecified. Hal ini menyebabkannya dicerminkan dalam mode RTL. Jika Anda tidak ingin ikon dicerminkan, Anda harus menyetelnya secara eksplisit menjadi forceLeftToRight. Apple menyebutkan beberapa pengecualian yang tidak boleh dicerminkan, seperti pemutaran media (Fast Forward, fallback, dll.), not balok, gambar yang menunjukkan berjalannya waktu, dll.
Contoh Objective-C:
// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
UISemanticContentAttributeForceLeftToRight;
Contoh Swift:
// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;
Untuk dokumentasi yang lebih mendalam tentang cara menerapkan RTL di iOS dan macOS, tinjau dokumentasi RTL Apple.
Konten semantik ditambahkan di iOS 9. Jika Anda mendukung iOS versi sebelumnya, framework internasionalisasi material akan mem-backport beberapa fungsi ke iOS 8.
Ikon RTL di web
Kami merekomendasikan artikel berikut sebagai penjelasan tentang RTL di web: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2
Secara default di web, ikon tidak dicerminkan saat arah tata letak dicerminkan. Anda perlu mencerminkan ikon yang sesuai secara khusus jika diperlukan.
Contoh di bawah ini menunjukkan cara menerapkan aturan CSS RTL sederhana. Anda juga dapat melihatnya di codepen.
page.html
<html dir="rtl">
<img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>
page.css
html[dir="rtl"] .icon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Membuat ikon RTL Anda sendiri menggunakan ImageMagick
Jika mencerminkan ikon dalam kode tidak memungkinkan, Anda dapat menggunakan ImageMagick untuk mencerminkan gambar secara horizontal.
convert -flop my_icon.png my_icon_rtl.png
Ikon mana yang harus dicerminkan untuk RTL?
Berikut adalah daftar ikon yang bisa dicerminkan secara terprogram ke RTL:
| panah kembali | panah kembali iOS | panah maju |
| panah maju ios | panah kiri | panah kanan |
| Penetapan | Pengembalian tugas | backspace |
| Baterai tidak diketahui | panggilan dilakukan | Penggabungan panggilan |
| panggilan tak terjawab | panggilan tak terjawab ke panggilan keluar | panggilan diterima |
| Pemisahan panggilan | kurung siku kiri | Voucher ke kanan |
| Mode pembaca chrome | perangkat tidak diketahui | DVR |
| Catatan peristiwa | Daftar putar unggulan | Video unggulan |
| halaman pertama | daratan penerbangan | Penerbangan lepas landas |
| Indentasi format dikurangi | Peningkatan indentasi format | Daftar format berbutir |
| maju | fungsi | Masukan |
| Tab keyboard | label | label penting |
| struktur label | halaman terakhir | peluncuran |
| Daftar | Bantuan langsung | berbagi layar seluler |
| Diagram multigaris | navigasikan sebelumnya | buka berikutnya |
| minggu depan | catatan | dibuka di baru |
| penambahan playlist | Antrean musik | ulangi |
| balasan | balas ke semua | berbagi layar |
| kirim | teks pendek | tampilkan diagram |
| urutan | Bintang setengah | subjek |
| Tren datar | toc | cenderung turun |
| Tren naik | urungkan | daftar tampilan |
| Seprai tampilan | kemas teks |