Materi - Ikon Sosial

Bab ini menjelaskan penggunaan ikon Sosial (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 ikon Sosial (Material) Google. 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"> kue </i>	kue
<i class = "material-icons custom"> domain </i>	domain
<i class = "material-icons custom"> grup </i>	kelompok
<i class = "material-icons custom"> group_add </i>	group_add
<i class = "material-icons custom"> location_city </i>	location_city
<i class = "material-icons custom"> suasana hati </i>	suasana hati
<i class = "material-icons custom"> mood_bad </i>	mood_bad
<i class = "material-icons custom"> pemberitahuan </i>	notifikasi
<i class = "material-icons custom"> notifications_active </i>	notifikasi_aktif
<i class = "material-icons custom"> notifications_none </i>	notifikasi_none
<i class = "material-icons custom"> notifications_off </i>	notifikasi_off
<i class = "material-icons custom"> notifications_paused </i>	notification_paused
<i class = "material-icons custom"> halaman </i>	halaman
<i class = "material-icons custom"> party_mode </i>	party_mode
<i class = "material-icons custom"> orang </i>	orang-orang
<i class = "material-icons custom"> people_outline </i>	people_outline
<i class = "material-icons custom"> orang </i>	orang
<i class = "material-icons custom"> person_add </i>	person_add
<i class = "material-icons custom"> person_outline </i>	person_outline
<i class = "material-icons custom"> plus_one </i>	tambah satu
<i class = "material-icons custom"> jajak pendapat </i>	pemilihan
<i class = "material-icons custom"> publik </i>	publik
<i class = "material-icons custom"> sekolah </i>	sekolah
<i class = "material-icons custom"> bagikan </i>	Bagikan
<i class = "material-icons custom"> whatshot </i>	whatshot