Ikon dasar
Untuk menggunakan ikon Google, tambahkan baris berikut di dalam <head> bagian dari halaman HTML Anda:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Catatan: Tidak ada download atau instalasi diperlukan!
Tambahkan material-icons kelas untuk elemen inline dan masukkan nama ikon ini:
Contoh
Kode berikut:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons"
style="font-size:48px;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Hasil di:
cloud
cloud
cloud Cobalah sendiri " ikon Google dirancang untuk digunakan dengan elemen inline. The <i> dan <span> elemen yang banyak digunakan untuk ikon.
Catatan: Ikon Material yang 24px secara default.
Juga diketahui bahwa jika Anda mengubah warna wadah ikon, warna ikon berubah juga. hal yang sama berlaku untuk bayangan, dan apa pun yang akan mewarisi menggunakan CSS. Pengecualian adalah CSS font-size properti, yang selalu 24px, kecuali sesuatu yang lain yang ditentukan.
Ikon yang cukup besar
Meskipun ikon materi dapat ditingkatkan untuk berbagai ukuran, direkomendasikan font-size yang baik 18, 24, 36 atau 48px:
Contoh
Kode berikut:
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size:
18px; }
.material-icons.md-24 { font-size:
24px; } /* Default */
.material-icons.md-36 { font-size:
36px; }
.material-icons.md-48 { font-size:
48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons
md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons
md-48">cloud</i>Hasil di:
cloud
cloud
cloud
cloud
Cobalah sendiri "