Anda dapat menambahkan ikon ke teks apa pun di halaman DevSite menggunakan font ikon Material yang dimuat sebelumnya . Anda juga dapat menggunakan ikon tombol saat merujuk ke tombol.
Ikon material
Untuk menambahkan ikon Material secara inline dengan teks Anda di halaman DevSite:
- Buka https://fonts.google.com/icons (bukan go/icons).
- Di kotak Telusuri ikon Material , telusuri ikon yang Anda inginkan.
- Klik ikon untuk melihat informasi penggunaan.
- Di bagian Font ikon pada panel informasi penggunaan, salin nama ikon dari blok kode kedua.
Salin kode berikut ke dalam teks Anda untuk menambahkan ikon:
<span class="material-icons">ICON_NAME</span>Untuk mengubah warna ikon (atau ukuran, jika perlu), gunakan atribut
style.
Contoh
Kode berikut menghasilkan teks "Untuk melihat detail tentang peristiwa tertentu, klik panah peluas ".
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
Anda dapat menggunakan <i>, bukan <span>. Kedua tag tersebut berfungsi; namun, span lebih akurat secara semantik—misalnya, untuk "Klik delete Hapus Hapus", Anda dapat menggunakan kode berikut:
Click <i class="material-icons">delete</i> <b>Delete</b>.
Untuk setiap elemen dengan class="material-icons", DevSite menambahkan atribut aria-hidden="true" dan translate="no". Hal ini memastikan pengalaman pengguna yang lebih baik bagi pembaca layar dengan menghapus item yang tidak perlu dari hierarki aksesibilitas, dan mencegah nama ikon diterjemahkan secara keliru.
Ikon tombol
Saat mendokumentasikan prosedur yang menggunakan ikon tombol, tambahkan class="inline-icon" ke tag <img>. Untuk informasi selengkapnya, lihat panduan gaya untuk tombol dan ikon.
Contoh
Kode berikut menghasilkan teks "Klik 
Buat Project".
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.