Materiał - ikony treści

W tym rozdziale wyjaśniono użycie ikon Google (Material) Content. 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 Treści (Materiał) Google. Zastąp tag <body> powyższego programu kodem podanym w tabeli, aby uzyskać odpowiednie wyniki -

Stosowanie	Wynik
<i class = "material-icons custom"> dodaj </i>	Dodaj
<i class = "material-icons custom"> add_box </i>	add_box
<i class = "material-icons custom"> add_circle </i>	add_circle
<i class = "material-icons custom"> add_circle_outline </i>	add_circle_outline
<i class = "material-icons custom"> archiwum </i>	archiwum
<i class = "material-icons custom"> Backspace </i>	Backspace
<i class = "material-icons custom"> blok </i>	blok
<i class = "material-icons custom"> wyczyść </i>	jasny
<i class = "material-icons custom"> content_copy </i>	content_copy
<i class = "material-icons custom"> content_cut </i>	content_cut
<i class = "material-icons custom"> content_paste </i>	content_paste
<i class = "material-icons custom"> utwórz </i>	Stwórz
<i class = "material-icons custom"> szkice </i>	warcaby
<i class = "material-icons custom"> filter_list </i>	filter_list
<i class = "material-icons custom"> flaga </i>	flaga
<i class = "material-icons custom"> font_download </i>	font_download
<i class = "material-icons custom"> do przodu </i>	Naprzód
<i class = "material-icons custom"> gest </i>	gest
<i class = "material-icons custom"> skrzynka odbiorcza </i>	w pudełku
<i class = "material-icons custom"> link </i>	połączyć
<i class = "material-icons custom"> poczta </i>	Poczta
<i class = "material-icons custom"> markunread </i>	Zaznacz jako nieprzeczytane
<i class = "material-icons custom"> ponów </i>	przerobić
<i class = "material-icons custom"> usuń </i>	usunąć
<i class = "material-icons custom"> remove_circle </i>	remove_circle
<i class = "material-icons custom"> remove_circle_outline </i>	remove_circle_outline
<i class = "material-icons custom"> odpowiedz </i>	Odpowiadać
<i class = "material-icons custom"> Reply_all </i>	Odpowiedz wszystkim
<i class = "material-icons custom"> raport </i>	raport
<i class = "material-icons custom"> zapisz </i>	zapisać
<i class = "material-icons custom"> select_all </i>	Zaznacz wszystko
<i class = "material-icons custom"> wyślij </i>	wysłać
<i class = "material-icons custom"> sort </i>	sortować
<i class = "material-icons custom"> text_format </i>	text_format
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icons custom"> cofnij </i>	Cofnij