Materiał - ikony sprzętu

W tym rozdziale wyjaśniono użycie ikon sprzętu (Material) Google. Zakładać, żecustom to nazwa klasy CSS, w której zdefiniowaliśmy rozmiar i kolor, jak pokazano w przykładzie podanym 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 sprzętu Google (Material). Zastąp tag <body> powyższego programu kodem podanym w tabeli, aby uzyskać odpowiednie wyniki -

Stosowanie Wynik
<i class = "material-icons custom"> cast </i> odlew
<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"> tablica_programisty </i> tablica_programisty
<i class = "material-icons custom"> device_hub </i> device_hub
<i class = "material-icons custom"> dok </i> dok
<i class = "material-icons custom"> gamepad </i> kontroler
<i class = "material-icons custom"> zestaw słuchawkowy </i> Zestaw słuchawkowy
<i class = "material-icons custom"> headset_mic </i> headset_mic
<i class = "material-icons custom"> klawiatura </i> klawiatura
<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"> pamięć </i> pamięć
<i class = "material-icons custom"> mysz </i> mysz
<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"> link do telefonu </i> link do telefonu
<i class = "material-icons custom"> phonelink_off </i> phonelink_off
<i class = "material-icons custom"> power_input </i> wejście zasilania
<i class = "material-icons custom"> router </i> router
<i class = "material-icons custom"> skaner </i> skaner
<i class = "material-icons custom"> bezpieczeństwo </i> bezpieczeństwo
<i class = "material-icons custom"> sim_card </i> sim_card
<i class = "material-icons custom"> smartfon </i> smartfonie
<i class = "material-icons custom"> głośnik </i> głośnik
<i class = "material-icons custom"> speaker_group </i> grupa_głośników
<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"> zabawki </i> zabawki
<i class = "material-icons custom"> tv </i> telewizor
<i class = "material-icons custom"> zegarek </i> zegarek