Materi - Ikon Konten

Bab ini menjelaskan penggunaan ikon Konten (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

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

Tabel berikut berisi penggunaan dan hasil dari ikon Konten Google (Material). Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian Hasil
<i class = "material-icons custom"> tambahkan </i> Menambahkan
<i class = "material-icons custom"> add_box </i> add_box
<i class = "material-icons custom"> add_circle </i> add_circle
<i class = "material-icons custom"> add_circle_outline </i> add_circle_outline
<i class = "material-icons custom"> arsip </i> arsip
<i class = "material-icons custom"> backspace </i> menghapus
<i class = "material-icons custom"> blokir </i> blok
<i class = "material-icons custom"> hapus </i> bersih
<i class = "material-icons custom"> content_copy </i> content_copy
<i class = "material-icons custom"> content_cut </i> content_cut
<i class = "material-icons custom"> content_paste </i> content_paste
<i class = "material-icons custom"> buat </i> membuat
<i class = "material-icons custom"> draf </i> konsep
<i class = "material-icons custom"> filter_list </i> filter_list
<i class = "material-icons custom"> bendera </i> bendera
<i class = "material-icons custom"> font_download </i> font_download
<i class = "material-icons custom"> maju </i> meneruskan
<i class = "material-icons custom"> isyarat </i> sikap
<i class = "material-icons custom"> kotak masuk </i> kotak masuk
<i class = "material-icons custom"> tautan </i> tautan
<i class = "material-icons custom"> mail </i> surat
<i class = "material-icons custom"> markunread </i> markunread
<i class = "material-icons custom"> ulangi </i> mengulangi
<i class = "material-icons custom"> hapus </i> menghapus
<i class = "material-icons custom"> remove_circle </i> remove_circle
<i class = "material-icons custom"> remove_circle_outline </i> remove_circle_outline
<i class = "material-icons custom"> balas </i> balasan
<i class = "material-icons custom"> reply_all </i> membalas semua
<i class = "material-icons custom"> laporan </i> melaporkan
<i class = "material-icons custom"> simpan </i> menyimpan
<i class = "material-icons custom"> pilih_semua </i> Pilih Semua
<i class = "material-icons custom"> kirim </i> Kirim
<i class = "material-icons custom"> urutkan </i> menyortir
<i class = "material-icons custom"> text_format </i> text_format
<i class = "material-icons custom"> stay_current_portrait </i> stay_current_portrait
<i class = "material-icons custom"> batalkan </i> membuka