マテリアル-マップアイコン

この章では、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>タグを表に示されているコードに置き換えて、それぞれの出力を取得します-

使用法	結果
<iclass = "material-iconscustom">ここにあります</ i>	ここにいた
<iclass = "material-iconscustom">方向</ 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
<iclass = "material-iconscustom">フライト</ i>	フライト
<iclass = "material-iconscustom">ホテル</ i>	ホテル
<iclass = "material-iconscustom">レイヤー</ i>	レイヤー
<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>	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-iconscustom">マップ</ i>	地図
<i class = "material-icons custom"> my_location </ i>	私の場所
<iclass = "material-iconscustom">ナビゲーション</ i>	ナビゲーション
<i class = "material-icons custom"> person_pin </ i>	person_pin
<i class = "material-icons custom"> pin_drop </ i>	ピンドロップ
<iclass = "material-iconscustom">場所</ i>	場所
<i class = "material-icons custom"> rate_review </ i>	rate_review
<i class = "material-icons custom"> restaurant_menu </ i>	Restaurant_menu
<iclass = "material-iconscustom">衛星</ i>	衛星
<i class = "material-icons custom"> store_mall_directory </ i>	store_mall_directory
<iclass = "material-iconscustom">トラフィック</ i>	トラフィック
<iclass = "material-iconscustom">地形</ i>	地形