資料-通知アイコン

この章では、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"> adb </ i> adb
<i class = "material-icons custom"> airline_seat_flat </ i> airline_seat_flat
<i class = "material-icons custom"> airline_seat_flat_angled </ i> airline_seat_flat_angled
<i class = "material-icons custom"> airline_seat_individual_suite </ i> airline_seat_individual_suite
<i class = "material-icons custom"> airline_seat_legroom_reduced </ i> airline_seat_legroom_reduced
<i class = "material-icons custom"> airline_seat_recline_extra </ i> airline_seat_recline_extra
<i class = "material-icons custom"> airline_seat_recline_normal </ i> airline_seat_recline_normal
<i class = "material-icons custom"> bluetooth_audio </ i> bluetooth_audio
<i class = "material-iconscustom">確認番号</ i> 予約番号
<i class = "material-icons custom"> disc_full </ i> disc_full
<i class = "material-icons custom"> do_not_disturb </ i> 邪魔しないでください
<i class = "material-icons custom"> do_not_disturb_alt </ i> do_not_disturb_alt
<i class = "material-icons custom"> drive_eta </ i> drive_eta
<i class = "material-icons custom"> event_available </ i> event_available
<i class = "material-icons custom"> event_busy </ i> event_busy
<i class = "material-icons custom"> event_note </ i> event_note
<i class = "material-icons custom"> folder_special </ i> folder_special
<i class = "material-icons custom"> live_tv </ i> live_tv
<i class = "material-icons custom"> mms </ i> mms
<iclass = "material-iconscustom">その他</ i> もっと
<i class = "material-icons custom"> network_locked </ i> network_locked
<i class = "material-icons custom"> ondemand_video </ i> ondemand_video
<i class = "material-icons custom"> personal_video </ i> personal_video
<i class = "material-icons custom"> phone_bluetooth_speaker </ i> phone_bluetooth_speaker
<i class = "material-icons custom"> phone_forwarded </ i> phone_forwarded
<i class = "material-icons custom"> phone_in_talk </ i> phone_in_talk
<i class = "material-icons custom"> phone_locked </ i> phone_locked
<i class = "material-icons custom"> phone_missed </ i> phone_missed
<i class = "material-icons custom"> phone_paused </ i> phone_paused
<iclass = "material-iconscustom">パワー</ i> パワー
<i class = "material-icons custom"> sd_card </ i> SDカード
<i class = "material-icons custom"> sim_card_alert </ i> sim_card_alert
<i class = "material-icons custom"> SMS </ i> SMS
<i class = "material-icons custom"> sms_failed </ i> sms_failed
<i class = "material-iconscustom">同期</ i> 同期
<i class = "material-icons custom"> sync_disabled </ i> sync_disabled
<i class = "material-icons custom"> sync_problem </ i> sync_problem
<i class = "material-icons custom"> system_update </ i> システムアップデート
<i class = "material-icons custom"> tap_and_play </ i> tap_and_play
<i class = "material-icons custom"> time_to_leave </ i> 行く時間だ
<iclass = "material-iconscustom">振動</ i> 振動
<i class = "material-icons custom"> voice_chat </ i> ボイスチャット
<i class = "material-icons custom"> vpn_lock </ i> vpn_lock
<i class = "material-icons custom"> wc </ i> トイレ
<i class = "material-icons custom"> Wi-Fi </ i> Wi-Fi