วัสดุ - ไอคอนแผนที่

บทนี้อธิบายการใช้งานไอคอนแผนที่ (วัสดุ) ของ Google สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

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

ตารางต่อไปนี้มีการใช้งานและผลลัพธ์ของไอคอนแผนที่ (วัสดุ) ของ Google แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน ผลลัพธ์
<i class = "material-icons custom"> อยู่ที่นี่ </i> อยู่ที่ไหน
<i class = "material-icons custom"> ทิศทาง </i> ทิศทาง
<i class = "material-icons custom"> directions_bike </i> Directions_bike
<i class = "material-icons custom"> directions_boat </i> Directions_boat
<i class = "material-icons custom"> directions_bus </i> Directions_bus
<i class = "material-icons custom"> directions_car </i> Directions_car
<i class = "material-icons custom"> directions_railway </i> directions_railway
<i class = "material-icons custom"> directions_run </i> Directions_run
<i class = "material-icons custom"> directions_subway </i> Directions_subway
<i class = "material-icons custom"> directions_transit </i> Directions_transit
<i class = "material-icons custom"> directions_walk </i> directions_walk
<i class = "material-icons custom"> เที่ยวบิน </i> เที่ยวบิน
<i class = "material-icons custom"> โรงแรม </i> โรงแรม
<i class = "material-icons custom"> เลเยอร์ </i> ชั้น
<i class = "material-icons custom"> layer_clear </i> Layer_clear
<i class = "material-icons custom"> local_activity </i> local_activity
<i class = "material-icons custom"> local_airport </i> local_airport
<i class = "material-icons custom"> local_atm </i> local_atm
<i class = "material-icons custom"> local_bar </i> local_bar
<i class = "material-icons custom"> local_cafe </i> local_cafe
<i class = "material-icons custom"> local_car_wash </i> local_car_wash
<i class = "material-icons custom"> local_convenience_store </i> local_convenience_store
<i class = "material-icons custom"> local_dining </i> local_dining
<i class = "material-icons custom"> local_drink </i> local_drink
<i class = "material-icons custom"> local_florist </i> local_florist
<i class = "material-icons custom"> local_gas_station </i> local_gas_station
<i class = "material-icons custom"> local_grocery_store </i> local_grocery_store
<i class = "material-icons custom"> local_hospital </i> local_hospital
<i class = "material-icons custom"> local_hotel </i> local_hotel
<i class = "material-icons custom"> local_l laundry_service </i> local_l laundry_service
<i class = "material-icons custom"> local_library </i> local_library
<i class = "material-icons custom"> local_mall </i> local_mall
<i class = "material-icons custom"> local_movies </i> local_movies
<i class = "material-icons custom"> local_offer </i> local_offer
<i class = "material-icons custom"> local_parking </i> local_parking
<i class = "material-icons custom"> local_pharmacy </i> local_pharmacy
<i class = "material-icons custom"> local_phone </i> local_phone
<i class = "material-icons custom"> local_pizza </i> local_pizza
<i class = "material-icons custom"> local_play </i> local_play
<i class = "material-icons custom"> local_post_office </i> local_post_office
<i class = "material-icons custom"> local_printshop </i> local_printshop
<i class = "material-icons custom"> local_see </i> local_see
<i class = "material-icons custom"> local_shipping </i> local_shipping
<i class = "material-icons custom"> local_taxi </i> local_taxi
<i class = "material-icons custom"> แผนที่ </i> แผนที่
<i class = "material-icons custom"> my_location </i> ตำแหน่งของฉัน
<i class = "material-icons custom"> การนำทาง </i> การนำทาง
<i class = "material-icons custom"> person_pin </i> person_pin
<i class = "material-icons custom"> pin_drop </i> pin_drop
<i class = "material-icons custom"> สถานที่ </i> สถานที่
<i class = "material-icons custom"> rate_review </i> rate_review
<i class = "material-icons custom"> restaurant_menu </i> restaurant_menu
<i class = "material-icons custom"> ดาวเทียม </i> ดาวเทียม
<i class = "material-icons custom"> store_mall_directory </i> store_mall_directory
<i class = "material-icons custom"> การจราจร </i> การจราจร
<i class = "material-icons custom"> ภูมิประเทศ </i> ภูมิประเทศ