Materiał - ikony urządzeń

W tym rozdziale opisano sposób korzystania z ikon urządzeń (materiałów) Google. Zakładać, żecustom to nazwa klasy CSS, w której zdefiniowaliśmy rozmiar i kolor, jak pokazano poniżej.

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

Poniższa tabela zawiera wykorzystanie i wyniki ikon urządzeń Google (materiałów).

Stosowanie Wynik
<i class = "material-icons custom"> access_alarm </i> access_alarm
<i class = "material-icons custom"> access_alarms </i> access_alarms
<i class = "material-icons custom"> access_time </i> czas dostępu
<i class = "material-icons custom"> add_alarm </i> add_alarm
<i class = "material-icons custom"> airplanemode_active </i> airplanemode_active
<i class = "material-icons custom"> airplanemode_inactive </i> airplanemode_inactive
<i class = "material-icons custom"> battery_alert </i> battery_alert
<i class = "material-icons custom"> battery_charging_full </i> ładowanie_baterii_pełne
<i class = "material-icons custom"> battery_full </i> pełna bateria
<i class = "material-icons custom"> battery_std </i> battery_std
<i class = "material-icons custom"> battery_unknown </i> battery_unknown
<i class = "material-icons custom"> bluetooth </i> bluetooth
<i class = "material-icons custom"> bluetooth_connected </i> bluetooth_connected
<i class = "material-icons custom"> bluetooth_disabled </i> bluetooth_disabled
<i class = "material-icons custom"> bluetooth_searching </i> bluetooth_searching
<i class = "material-icons custom"> jasność_auto </i> jasność_auto
<i class = "material-icons custom"> Brightness_high </i> jasność_wysoka
<i class = "material-icons custom"> Brightness_low </i> jasność_wolna
<i class = "material-icons custom"> jasność_średnia </i> jasność_średnia
<i class = "material-icons custom"> data_usage </i> użycie danych
<i class = "material-icons custom"> developer_mode </i> tryb dewelopera
<i class = "material-icons custom"> urządzenia </i> urządzenia
<i class = "material-icons custom"> dvr </i> dvr
<i class = "material-icons custom"> gps_fixed </i> gps_fixed
<i class = "material-icons custom"> gps_not_fixed </i> gps_not_fixed
<i class = "material-icons custom"> gps_off </i> gps_off
<i class = "material-icons custom"> graphic_eq </i> graphic_eq
<i class = "material-icons custom"> location_disabled </i> location_disabled
<i class = "material-icons custom"> location_searching </i> wyszukiwanie_lokalizacji
<i class = "material-icons custom"> komórka_sieci </i> komórka_sieci
<i class = "material-icons custom"> network_wifi </i> network_wifi
<i class = "material-icons custom"> screen_lock_landscape </i> screen_lock_landscape
<i class = "material-icons custom"> screen_lock_portrait </i> screen_lock_portrait
<i class = "material-icons custom"> screen_lock_rotation </i> screen_lock_rotation
<i class = "material-icons custom"> screen_rotation </i> screen_rotation
<i class = "material-icons custom"> sd_storage </i> sd_storage
<i class = "material-icons custom"> settings_system_daydream </i> settings_system_daydream
<i class = "material-icons custom"> signal_cellular_4_bar </i> signal_cellular_4_bar
<i class = "material-icons custom"> wifi_tethering </i> wifi_tethering
<i class = "material-icons custom"> signal_cellular_no_sim </i> signal_cellular_no_sim
<i class = "material-icons custom"> signal_cellular_null </i> signal_cellular_null
<i class = "material-icons custom"> signal_cellular_off </i> signal_cellular_off
<i class = "material-icons custom"> signal_wifi_4_bar </i> signal_wifi_4_bar
<i class = "material-icons custom"> signal_wifi_4_bar_lock </i> signal_wifi_4_bar_lock
<i class = "material-icons custom"> signal_wifi_off </i> signal_wifi_off
<i class = "material-icons custom"> przechowywanie </i> przechowywanie
<i class = "material-icons custom"> usb </i> usb
<i class = "material-icons custom"> tapeta </i> Tapeta
<i class = "material-icons custom"> widżety </i> widżety
<i class = "material-icons custom"> wifi_lock </i> wifi_lock
<i class = "material-icons custom"> signal_cellular_connected_no_internet_4_bar </i> signal_cellular_connected_no_internet_4_bar