Vật liệu - Biểu tượng bản đồ

Chương này giải thích cách sử dụng các biểu tượng Bản đồ (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 Bản đồ (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"> đã ở đây </i>	ở đây
<i class = "material-icon custom"> chỉ đường </i>	hướng
<i class = "material-icon custom"> direction_bike </i>	chỉ đường_ xe máy
<i class = "material-icon custom"> direction_boat </i>	chỉ đường_ thuyền
<i class = "material-icon custom"> direction_bus </i>	xe buýt chỉ đường
<i class = "material-icon custom"> direction_car </i>	xe_chỉ_đường
<i class = "material-icon custom"> direction_railway </i>	chỉ đường_railway
<i class = "material-icon custom"> direction_run </i>	chỉ đường_run
<i class = "material-icon custom"> direction_subway </i>	chỉ đường
<i class = "material-icon custom"> direction_transit </i>	Dire_transit
<i class = "material-icon custom"> direction_walk </i>	chỉ đường_ đi bộ
<i class = "material-icon custom"> chuyến bay </i>	chuyến bay
<i class = "material-icon custom"> khách sạn </i>	khách sạn
<i class = "material-icon custom"> lớp </i>	lớp
<i class = "material-icon custom"> layer_clear </i>	layer_clear
<i class = "material-icon custom"> local_activity </i>	local_activity
<i class = "material-icon custom"> local_airport </i>	local_airport
<i class = "material-icon custom"> local_atm </i>	local_atm
<i class = "material-icon custom"> local_bar </i>	local_bar
<i class = "material-icon custom"> local_cafe </i>	local_cafe
<i class = "material-icon custom"> local_car_wash </i>	local_car_wash
<i class = "material-icon custom"> local_convenience_store </i>	local_convenience_store
<i class = "material-icon custom"> local_dining </i>	local_dining
<i class = "material-icon custom"> local_drink </i>	local_drink
<i class = "material-icon custom"> local_florist </i>	local_florist
<i class = "material-icon custom"> local_gas_station </i>	local_gas_station
<i class = "material-icon custom"> local_grocery_store </i>	local_grocery_store
<i class = "material-icon custom"> local_hospital </i>	local_hospital
<i class = "material-icon custom"> local_hotel </i>	local_hotel
<i class = "material-icon custom"> local_lellowry_service </i>	local_lellowry_service
<i class = "material-icon custom"> local_library </i>	thư viện địa phương
<i class = "material-icon custom"> local_mall </i>	local_mall
<i class = "material-icon custom"> local_movies </i>	local_movies
<i class = "material-icon custom"> local_offer </i>	local_offer
<i class = "material-icon custom"> local_parking </i>	local_parking
<i class = "material-icon custom"> local_pharmacy </i>	local_pharmacy
<i class = "material-icon custom"> local_phone </i>	local_phone
<i class = "material-icon custom"> local_pizza </i>	local_pizza
<i class = "material-icon custom"> local_play </i>	local_play
<i class = "material-icon custom"> local_post_office </i>	Bưu điện địa phương
<i class = "material-icon custom"> local_printshop </i>	local_printshop
<i class = "material-icon custom"> local_see </i>	local_see
<i class = "material-icon custom"> local_shipping </i>	local_shipping
<i class = "material-icon custom"> local_taxi </i>	local_taxi
<i class = "material-icon custom"> bản đồ </i>	bản đồ
<i class = "material-icon custom"> my_location </i>	my_location
<i class = "material-icon custom"> chuyển hướng </i>	dẫn đường
<i class = "material-icon custom"> person_pin </i>	person_pin
<i class = "material-icon custom"> pin_drop </i>	pin_drop
<i class = "material-icon custom"> địa điểm </i>	địa điểm
<i class = "material-icon custom"> rate_review </i>	đánh giá tỉ lệ
<i class = "material-icon custom"> restaurant_menu </i>	thực đơn nhà hàng
<i class = "material-icon custom"> vệ tinh </i>	vệ tinh
<i class = "material-icon custom"> store_mall_directory </i>	store_mall_directory
<i class = "material-icon custom"> giao thông </i>	giao thông
<i class = "material-icon custom"> địa hình </i>	địa hình