Bahan - Ikon Peta

Bab ini menjelaskan penggunaan ikon Peta Google (Material). Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.

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

Tabel berikut berisi penggunaan dan hasil dari ikon Google (Material) Maps. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -

Pemakaian Hasil
<i class = "material-icons custom"> pernah ke sini </i> telah di sini
<i class = "material-icons custom"> petunjuk arah </i> petunjuk arah
<i class = "material-icons custom"> direction_bike </i> direction_bike
<i class = "material-icons custom"> direction_boat </i> direction_boat
<i class = "material-icons custom"> direction_bus </i> direction_bus
<i class = "material-icons custom"> direction_car </i> arah_car
<i class = "material-icons custom"> direction_railway </i> direction_railway
<i class = "material-icons custom"> direction_run </i> direction_run
<i class = "material-icons custom"> direction_subway </i> direction_subway
<i class = "material-icons custom"> direction_transit </i> direction_transit
<i class = "material-icons custom"> direction_walk </i> direction_walk
<i class = "material-icons custom"> penerbangan </i> penerbangan
<i class = "material-icons custom"> hotel </i> hotel
<i class = "material-icons custom"> lapisan </i> lapisan
<i class = "material-icons custom"> layers_clear </i> layers_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_laundry_service </i> local_laundry_service
<i class = "material-icons custom"> local_library </i> Perpustakaan lokal
<i class = "material-icons custom"> local_mall </i> local_mall
<i class = "material-icons custom"> film_lokal </i> film_lokal
<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"> peta </i> peta
<i class = "material-icons custom"> my_location </i> lokasi saya
<i class = "material-icons custom"> navigasi </i> navigasi
<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"> tempat </i> tempat
<i class = "material-icons custom"> rate_review </i> rate_review
<i class = "material-icons custom"> restaurant_menu </i> menu restoran
<i class = "material-icons custom"> satelit </i> satelit
<i class = "material-icons custom"> store_mall_directory </i> store_mall_directory
<i class = "material-icons custom"> lalu lintas </i> lalu lintas
<i class = "material-icons custom"> medan </i> medan