Bahan - Ikon Perangkat Keras

Bab ini menjelaskan penggunaan ikon (Material) Hardware Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami mendefinisikan ukuran dan warna, seperti yang ditunjukkan pada contoh 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 (Material) Perangkat Keras 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"> cast </i>	Pemeran
<i class = "material-icons custom"> cast_connected </i>	cast_connected
<i class = "material-icons custom"> komputer </i>	komputer
<i class = "material-icons custom"> desktop_mac </i>	desktop_mac
<i class = "material-icons custom"> desktop_windows </i>	desktop_windows
<i class = "material-icons custom"> developer_board </i>	developer_board
<i class = "material-icons custom"> device_hub </i>	device_hub
<i class = "material-icons custom"> dok </i>	dermaga
<i class = "material-icons custom"> gamepad </i>	gamepad
<i class = "material-icons custom"> headset </i>	headset
<i class = "material-icons custom"> headset_mic </i>	headset_mic
<i class = "material-icons custom"> keyboard </i>	papan ketik
<i class = "material-icons custom"> keyboard_arrow_down </i>	keyboard_arrow_down
<i class = "material-icons custom"> keyboard_arrow_left </i>	keyboard_arrow_left
<i class = "material-icons custom"> keyboard_arrow_right </i>	keyboard_arrow_right
<i class = "material-icons custom"> keyboard_arrow_up </i>	keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </i>	keyboard_backspace
<i class = "material-icons custom"> keyboard_capslock </i>	keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </i>	keyboard_hide
<i class = "material-icons custom"> keyboard_return </i>	keyboard_return
<i class = "material-icons custom"> keyboard_tab </i>	keyboard_tab
<i class = "material-icons custom"> keyboard_voice </i>	keyboard_voice
<i class = "material-icons custom"> laptop </i>	laptop
<i class = "material-icons custom"> laptop_chromebook </i>	laptop_chromebook
<i class = "material-icons custom"> laptop_mac </i>	laptop_mac
<i class = "material-icons custom"> laptop_windows </i>	laptop_windows
<i class = "material-icons custom"> memori </i>	Penyimpanan
<i class = "material-icons custom"> mouse </i>	mouse
<i class = "material-icons custom"> phone_android </i>	phone_android
<i class = "material-icons custom"> phone_iphone </i>	phone_iphone
<i class = "material-icons custom"> phonelink </i>	phonelink
<i class = "material-icons custom"> phonelink_off </i>	phonelink_off
<i class = "material-icons custom"> power_input </i>	input daya
<i class = "material-icons custom"> router </i>	router
<i class = "material-icons custom"> pemindai </i>	pemindai
<i class = "material-icons custom"> keamanan </i>	keamanan
<i class = "material-icons custom"> sim_card </i>	kartu SIM
<i class = "material-icons custom"> ponsel cerdas </i>	smartphone
<i class = "material-icons custom"> speaker </i>	pembicara
<i class = "material-icons custom"> speaker_group </i>	speaker_group
<i class = "material-icons custom"> tablet </i>	tablet
<i class = "material-icons custom"> tablet_android </i>	tablet_android
<i class = "material-icons custom"> tablet_mac </i>	tablet_mac
<i class = "material-icons custom"> mainan </i>	mainan
<i class = "material-icons custom"> tv </i>	televisi
<i class = "material-icons custom"> jam tangan </i>	menonton