Materyal - İçerik Simgeleri

Bu bölüm, Google'ın (Materyal) İçerik 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 (Materyal) İçerik simgelerinin kullanımını ve sonuçlarını içermektedir. İ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"> ekle </i>	Ekle
<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"> arşiv </i>	Arşiv
<i class = "material-icons custom"> geri tuşu </i>	geri tuşu
<i class = "material-icons custom"> blok </i>	blok
<i class = "material-icons custom"> temizle </i>	açık
<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"> oluştur </i>	oluşturmak
<i class = "material-icons custom"> taslaklar </i>	taslaklar
<i class = "material-icons custom"> filter_list </i>	filter_list
<i class = "material-icons custom"> bayrak </i>	bayrak
<i class = "material-icons custom"> font_download </i>	font_download
<i class = "material-icons custom"> yönlendir </i>	ileri
<i class = "material-icons custom"> hareket </i>	mimik
<i class = "material-icons custom"> gelen kutusu </i>	gelen kutusu
<i class = "material-icons custom"> bağlantı </i>	bağlantı
<i class = "material-icons custom"> posta </i>	posta
<i class = "material-icons custom"> markunread </i>	okunmadı olarak işaretle
<i class = "material-icons custom"> yeniden yap </i>	yeniden yapmak
<i class = "material-icons custom"> kaldır </i>	Kaldırmak
<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"> yanıtla </i>	cevap
<i class = "material-icons custom"> yanıtla_tüm </i>	hepsini cevapla
<i class = "material-icons custom"> raporu </i>	bildiri
<i class = "material-icons custom"> kaydet </i>	kayıt etmek
<i class = "material-icons custom"> select_all </i>	hepsini seç
<i class = "material-icons custom"> gönder </i>	göndermek
<i class = "material-icons custom"> sırala </i>	çeşit
<i class = "material-icons custom"> text_format </i>	Metin formatı
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icons custom"> geri al </i>	geri alma