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

この章では、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> 地形