Material - Ícones de Mapas

Este capítulo explica o uso dos ícones de mapas (materiais) do Google. Assuma issocustom é o nome da classe CSS onde definimos o tamanho e a cor, conforme mostrado no exemplo abaixo.

<!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 tabela a seguir contém o uso e os resultados dos ícones do Google Maps (Material). Substitua a tag <body> do programa acima com o código fornecido na tabela para obter os respectivos resultados -

Uso Resultado
<i class = "material-icons custom"> já esteve aqui </i> já estive aqui
<i class = "material-icons custom"> direções </i> instruções
<i class = "material-icons custom"> direction_bike </i> direções_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> direction_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> direcções_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"> voo </i> voar
<i class = "material-icons custom"> hotel </i> hotel
<i class = "material-icons custom"> camadas </i> camadas
<i class = "material-icons custom"> camadas_clear </i> camadas_clear
<i class = "material-icons custom"> local_activity </i> atividade_ local
<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"> bebida_local </i> bebida_local
<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> hospital local
<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> Biblioteca local
<i class = "material-icons custom"> local_mall </i> local_mall
<i class = "material-icons custom"> locais_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"> mapa </i> mapa
<i class = "material-icons custom"> my_location </i> minha localização
<i class = "material-icons custom"> navegação </i> navegação
<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"> lugar </i> Lugar, colocar
<i class = "material-icons custom"> rate_review </i> rate_review
<i class = "material-icons custom"> restaurant_menu </i> Cardápio do restaurante
<i class = "material-icons custom"> satélite </i> satélite
<i class = "material-icons custom"> store_mall_directory </i> store_mall_directory
<i class = "material-icons custom"> tráfego </i> tráfego
<i class = "material-icons custom"> terreno </i> terreno