Ikon Material

Google menyediakan satu set 750 ikon yang dirancang di bawah "pedoman desain material" dan ini dikenal sebagai Material Designikon. Ikon ini sederhana dan mendukung semua browser web modern. Karena ikon-ikon ini berbasis vektor, mereka juga dapat diskalakan. Untuk menggunakan ikon ini, kita harus memuat font (perpustakaan)material-icons.

Memuat Font (perpustakaan)

Untuk memuat pustaka ikon material, salin dan tempel baris berikut di bagian <head> pada halaman web.

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

Menggunakan Ikon

Ikon Material Google menyediakan daftar panjang ikon. Pilih salah satu dari mereka dan tambahkan nama kelas ikon ke elemen HTML mana pun di dalam tag <body>. Dalam contoh berikut, kami telah menggunakan ikon bernamaaccessibility yang termasuk dalam kategori tindakan.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Mendefinisikan Ukuran

Anda dapat menambah atau mengurangi ukuran ikon dengan menentukan ukurannya di CSS dan menggunakannya bersama dengan nama kelas seperti yang ditunjukkan di bawah ini. Pada contoh berikut, kami telah mendeklarasikan ukurannya sebagai 6 em.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Mendefinisikan Warna

Anda dapat menggunakan CSS untuk menentukan warna ikon. Contoh berikut menunjukkan bagaimana Anda dapat mengubah warna ikon yang disebutaccessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Daftar Kategori

Font Google Material Icons menyediakan 519 ikon dalam kategori berikut -

Ikon Tindakan
Ikon Peringatan
Ikon AV
Ikon Komunikasi
Ikon Konten
Ikon Perangkat
Ikon Editor
Ikon File
Ikon Perangkat Keras
Ikon Gambar
Ikon Peta
Ikon Navigasi
Ikon Pemberitahuan
Ikon Sosial
Beralih Ikon

Untuk menggunakan salah satu dari ikon ini, Anda harus mengganti nama kelas dalam program yang diberikan dalam bab ini dengan nama kelas dari ikon yang diinginkan. Dalam bab-bab mendatang dari Unit ini (Ikon Material), kami telah menjelaskan berdasarkan kategori penggunaan dan keluaran masing-masing dari berbagai Ikon Material.