Malzeme - Donanım Simgeleri

Bu bölüm, Google'ın (Malzeme) Donanım simgelerinin kullanımını açıklamaktadır. Varsayalım kicustom aşağıda verilen örnekte gösterildiği gibi boyut ve rengi tanımladığımız CSS sınıf adıdır.

<!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>

Aşağıdaki tablo, Google'ın (Malzeme) Donanım simgelerinin kullanımını ve sonuçlarını içerir. İlgili çıktıları elde etmek için yukarıdaki programın <body> etiketini tabloda verilen kodla değiştirin -

Kullanım	Sonuç
<i class = "material-icons custom"> yayınlama </i>	oyuncular
<i class = "material-icons custom"> cast_connected </i>	cast_connected
<i class = "material-icons custom"> bilgisayar </i>	bilgisayar
<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"> yuva </i>	rıhtım
<i class = "material-icons custom"> oyun kumandası </i>	oyun kumandası
<i class = "material-icons custom"> kulaklık </i>	kulaklık
<i class = "material-icons custom"> headset_mic </i>	headset_mic
<i class = "material-icons custom"> klavye </i>	tuş takımı
<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"> dizüstü bilgisayar </i>	dizüstü bilgisayar
<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"> bellek </i>	hafıza
<i class = "material-icons custom"> fare </i>	fare
<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"> telefon bağlantısı </i>	telefon bağlantısı
<i class = "material-icons custom"> phonelink_off </i>	phonelink_off
<i class = "material-icons custom"> power_input </i>	güç girişi
<i class = "material-icons custom"> yönlendirici </i>	yönlendirici
<i class = "material-icons custom"> tarayıcı </i>	tarayıcı
<i class = "material-icons custom"> güvenlik </i>	güvenlik
<i class = "material-icons custom"> sim_card </i>	SIM kart
<i class = "material-icons custom"> akıllı telefon </i>	akıllı telefon
<i class = "material-icons custom"> hoparlör </i>	hoparlör
<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"> oyuncaklar </i>	oyuncaklar
<i class = "material-icons custom"> tv </i>	televizyon
<i class = "material-icons custom"> izle </i>	izlemek