Vật liệu - Biểu tượng hình ảnh

Chương này giải thích cách sử dụng các biểu tượng Hình ảnh (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

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

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Hình ảnh (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> add_to_photos </i>	add_to_photos
<i class = "material-icon custom"> điều chỉnh </i>	điều chỉnh
<i class = "material-icon custom"> trợ lý </i>	phụ tá
<i class = "material-icon custom"> trợ lý </i>	phụ tá
<i class = "material-icon custom"> audiotrack </i>	Track âm thanh
<i class = "material-icon custom"> dim_circular </i>	mờ_circular
<i class = "material-icon custom"> dim_linear </i>	dim_linear
<i class = "material-icon custom"> dim_off </i>	dim_off
<i class = "material-icon custom"> dim_on </i>	mờ_on
<i class = "material-icon custom"> độ sáng_1 </i>	độ sáng_1
<i class = "material-icon custom"> độ sáng_2 </i>	độ sáng_2
<i class = "material-icon custom"> độ sáng_3 </i>	độ sáng_3
<i class = "material-icon custom"> Bright_4 </i>	độ sáng_4
<i class = "material-icon custom"> Bright_5 </i>	độ sáng_5
<i class = "material-icon custom"> Bright_6 </i>	độ sáng_6
<i class = "material-icon custom"> Bright_7 </i>	độ sáng_7
<i class = "material-icon custom"> break_image </i>	hình ảnh bị hỏng
<i class = "material-icon custom"> brush </i>	chải
<i class = "material-icon custom"> máy ảnh </i>	Máy ảnh
<i class = "material-icon custom"> camera_alt </i>	camera_alt
<i class = "material-icon custom"> camera_front </i>	camera_front
<i class = "material-icon custom"> camera_rear </i>	camera_rear
<i class = "material-icon custom"> camera_roll </i>	camera_roll
<i class = "material-icon custom"> center_focus_strong </i>	center_focus_strong
<i class = "material-icon custom"> center_focus_weak </i>	center_focus_weak
<i class = "material-icon custom"> bộ sưu tập </i>	bộ sưu tập
<i class = "material-icon custom"> collection_bookmark </i>	collection_bookmark
<i class = "material-icon custom"> color_lens </i>	color_lens
<i class = "material-icon custom"> chỉnh màu </i>	tô màu
<i class = "material-icon custom"> so sánh </i>	so sánh
<i class = "material-icon custom"> control_point </i>	control_point
<i class = "material-icon custom"> control_point_duplicate </i>	control_point_duplicate
<i class = "material-icon custom"> cắt </i>	mùa vụ
<i class = "material-icon custom"> crop_16_9 </i>	crop_16_9
<i class = "material-icon custom"> crop_3_2 </i>	crop_3_2
<i class = "material-icon custom"> crop_5_4 </i>	crop_5_4
<i class = "material-icon custom"> crop_7_5 </i>	crop_7_5
<i class = "material-icon custom"> crop_din </i>	crop_din
<i class = "material-icon custom"> crop_free </i>	crop_free
<i class = "material-icon custom"> crop_landscape </i>	crop_landscape
<i class = "material-icon custom"> crop_original </i>	crop_original
<i class = "material-icon custom"> crop_portrait </i>	crop_portrait
<i class = "material-icon custom"> crop_square </i>	crop_square
<i class = "material-icon custom"> dehaze </i>	ngủ gật
<i class = "material-icon custom"> chi tiết </i>	chi tiết
<i class = "material-icon custom"> chỉnh sửa </i>	biên tập
<i class = "material-icon custom"> phơi sáng </i>	sự phơi nhiễm
<i class = "material-icon custom" >osure_neg_1 </i>	contact_neg_1
<i class = "material-icon custom" >osure_plus_1 </i>	contact_plus_1
<i class = "material-icon custom" >osure_plus_2 </i>	Exposure_plus_2
<i class = "material-icon custom" >osure_zero </i>	contact_zero
<i class = "material-icon custom"> bộ lọc </i>	bộ lọc
<i class = "material-icon custom"> filter_1 </i>	filter_1
<i class = "material-icon custom"> filter_2 </i>	bộ lọc_2
<i class = "material-icon custom"> filter_3 </i>	filter_3
<i class = "material-icon custom"> filter_4 </i>	filter_4
<i class = "material-icon custom"> filter_5 </i>	filter_5
<i class = "material-icon custom"> filter_6 </i>	filter_6
<i class = "material-icon custom"> filter_7 </i>	filter_7
<i class = "material-icon custom"> filter_8 </i>	filter_8
<i class = "material-icon custom"> filter_9 </i>	filter_9
<i class = "material-icon custom"> filter_9_plus </i>	filter_9_plus
<i class = "material-icon custom"> filter_b_and_w </i>	filter_b_and_w
<i class = "material-icon custom"> filter_center_focus </i>	filter_center_focus
<i class = "material-icon custom"> filter_drama </i>	filter_drama
<i class = "material-icon custom"> filter_frames </i>	filter_frames
<i class = "material-icon custom"> filter_hdr </i>	filter_hdr
<i class = "material-icon custom"> filter_none </i>	filter_none
<i class = "material-icon custom"> filter_tilt_shift </i>	filter_tilt_shift
<i class = "material-icon custom"> filter_vintic </i>	filter_vi Movie
<i class = "material-icon custom"> bùng phát </i>	bùng phát
<i class = "material-icon custom"> flash_auto </i>	flash_auto
<i class = "material-icon custom"> flash_off </i>	flash_off
<i class = "material-icon custom"> flash_on </i>	flash_on
<i class = "material-icon custom"> lật </i>	lật
<i class = "material-icon custom"> gradient </i>	dốc
<i class = "material-icon custom"> hạt </i>	ngũ cốc
<i class = "material-icon custom"> grid_off </i>	grid_off
<i class = "material-icon custom"> grid_on </i>	lưới điện trên
<i class = "material-icon custom"> hdr_off </i>	hdr_off
<i class = "material-icon custom"> hdr_on </i>	hdr_on
<i class = "material-icon custom"> hdr_strong </i>	hdr_strong
<i class = "material-icon custom"> hdr_weak </i>	hdr_weak
<i class = "material-icon custom"> chữa bệnh </i>	đang lành lại
<i class = "material-icon custom"> image </i>	hình ảnh
<i class = "material-icon custom"> image_aspect_ratio </i>	image_aspect_ratio
<i class = "material-icon custom"> iso </i>	iso
<i class = "material-icon custom"> cảnh quan </i>	phong cảnh
<i class = "material-icon custom"> rò rỉ_add </i>	rò rỉ_add
<i class = "material-icon custom"> rò rỉ_remove </i>	rò rỉ_remove
<i class = "material-icon custom"> ống kính </i>	ống kính
<i class = "material-icon custom"> ngoại hình </i>	nhìn
<i class = "material-icon custom"> look_3 </i>	trông_3
<i class = "material-icon custom"> look_4 </i>	vẻ_4
<i class = "material-icon custom"> look_5 </i>	vẻ_5
<i class = "material-icon custom"> look_6 </i>	vẻ_6
<i class = "material-icon custom"> look_one </i>	ngoại hình
<i class = "material-icon custom"> look_two </i>	look_two
<i class = "material-icon custom"> loupe </i>	chó săn
<i class = "material-icon custom"> đơn sắc_photos </i>	Mono_photos
<i class = "material-icon custom"> movie_creation </i>	movie_creation
<i class = "material-icon custom"> music_note </i>	music_note
<i class = "material-icon custom"> nature </i>	Thiên nhiên
<i class = "material-icon custom"> nature_people </i>	thiên nhiên
<i class = "material-icon custom"> wb_sunny </i>	wb_sunny
<i class = "material-icon custom"> Navigate_next </i>	Navigate_next
<i class = "material-icon custom"> Navigate_before </i>	Navigate_before
<i class = "material-icon custom"> bảng màu </i>	bảng màu
<i class = "material-icon custom"> ảnh toàn cảnh </i>	toàn cảnh
<i class = "material-icon custom"> panorama_fish_eye </i>	panorama_fish_eye
<i class = "material-icon custom"> panorama_horizontal </i>	panorama_horiz Ngang
<i class = "material-icon custom"> panorama_vertical </i>	panorama_vertical
<i class = "material-icon custom"> panorama_wide_angle </i>	panorama_wide_angle
<i class = "material-icon custom"> ảnh </i>	hình chụp
<i class = "material-icon custom"> photo_album </i>	album ảnh
<i class = "material-icon custom"> photo_camera </i>	photo_camera
<i class = "material-icon custom"> photo_library </i>	thư viện ảnh
<i class = "material-icon custom"> photo_size_select_actual </i>	photo_size_select_actual
<i class = "material-icon custom"> photo_size_select_large </i>	photo_size_select_large
<i class = "material-icon custom"> photo_size_select_small </i>	photo_size_select_small
<i class = "material-icon custom"> picture_as_pdf </i>	picture_as_pdf
<i class = "material-icon custom"> chân dung </i>	Chân dung
<i class = "material-icon custom"> remove_red_eye </i>	remove_red_eye
<i class = "material-icon custom"> xoay_90_degrees_ccw </i>	xoay_90_degrees_ccw
<i class = "material-icon custom"> xoay_left </i>	xoay trái
<i class = "material-icon custom"> xoay_right </i>	xoay phải
<i class = "material-icon custom"> trình chiếu </i>	trình chiếu
<i class = "material-icon custom"> nắn lại </i>	làm thẳng
<i class = "material-icon custom"> style </i>	Phong cách
<i class = "material-icon custom"> switch_camera </i>	switch_camera
<i class = "material-icon custom"> switch_video </i>	switch_video
<i class = "material-icon custom"> tag_faces </i>	tag_faces
<i class = "material-icon custom"> kết cấu </i>	kết cấu
<i class = "material-icon custom"> timelapse </i>	timelapse
<i class = "material-icon custom"> hẹn giờ </i>	hẹn giờ
<i class = "material-icon custom"> timer_10 </i>	timer_10
<i class = "material-icon custom"> timer_3 </i>	timer_3
<i class = "material-icon custom"> timer_off </i>	timer_off
<i class = "material-icon custom"> tonality </i>	âm giai
<i class = "material-icon custom"> biến đổi </i>	biến đổi
<i class = "material-icon custom"> điều chỉnh </i>	điều chỉnh
<i class = "material-icon custom"> view_comfy </i>	view_comfy
<i class = "material-icon custom"> view_compact </i>	view_compact
<i class = "material-icon custom"> họa tiết </i>	họa tiết
<i class = "material-icon custom"> wb_auto </i>	wb_auto
<i class = "material-icon custom"> wb_cloudy </i>	wb_cloudy
<i class = "material-icon custom"> wb_incandescent </i>	wb_incandescent
<i class = "material-icon custom"> wb_iridescent </i>	wb_iridescent