素材-デバイスアイコン

この章では、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の(マテリアル)デバイスアイコンの使用法と結果が含まれています。

使用法 結果
<i class = "material-icons custom"> access_alarm </ i> access_alarm
<i class = "material-icons custom"> access_alarms </ i> access_alarms
<i class = "material-icons custom"> access_time </ i> アクセス時間
<i class = "material-icons custom"> add_alarm </ i> add_alarm
<iclass = "material-iconscustom">機内モード_アクティブ</ i> 機内モードアクティブ
<iclass = "material-iconscustom">機内モード_非アクティブ</ i> 機内モード非アクティブ
<i class = "material-iconscustom">バッテリー_アラート</ i> Battery_alert
<i class = "material-iconscustom">バッテリー_充電_フル</ i> バッテリー充電_フル
<i class = "material-iconscustom">バッテリーフル</ i> Battery_full
<i class = "material-iconscustom">バッテリー_std </ i> Battery_std
<i class = "material-iconscustom">バッテリー_不明</ i> バッテリー不明
<iclass = "material-iconscustom">ブルートゥース</ i> ブルートゥース
<i class = "material-icons custom"> bluetooth_connected </ i> bluetooth_connected
<i class = "material-icons custom"> bluetooth_disabled </ i> bluetooth_disabled
<i class = "material-icons custom"> bluetooth_searching </ i> bluetooth_searching
<i class = "material-icons custom"> brightness_auto </ i> 明るさ_auto
<i class = "material-icons custom"> brightness_high </ i> 明るさ_高
<i class = "material-icons custom"> brightness_low </ i> 明るさ_低
<i class = "material-icons custom"> brightness_medium </ i> 明るさ_中
<i class = "material-icons custom"> data_usage </ i> データ使用量
<i class = "material-icons custom"> developer_mode </ i> 開発者モード
<iclass = "material-iconscustom">デバイス</ i> デバイス
<i class = "material-icons custom"> dvr </ i> dvr
<i class = "material-icons custom"> gps_fixed </ i> gps_fixed
<i class = "material-icons custom"> gps_not_fixed </ i> gps_not_fixed
<i class = "material-icons custom"> gps_off </ i> gps_off
<i class = "material-icons custom"> graphic_eq </ i> Graphic_eq
<i class = "material-icons custom"> location_disabled </ i> location_disabled
<i class = "material-icons custom"> location_searching </ i> location_searching
<i class = "material-icons custom"> network_cell </ i> network_cell
<i class = "material-icons custom"> network_wifi </ i> network_wifi
<i class = "material-icons custom"> screen_lock_landscape </ i> screen_lock_landscape
<i class = "material-icons custom"> screen_lock_portrait </ i> screen_lock_portrait
<i class = "material-icons custom"> screen_lock_rotation </ i> screen_lock_rotation
<i class = "material-icons custom"> screen_rotation </ i> 画面の回転
<i class = "material-icons custom"> sd_storage </ i> sd_storage
<i class = "material-icons custom"> settings_system_daydream </ i> settings_system_daydream
<i class = "material-icons custom"> signal_cellular_4_bar </ i> signal_cellular_4_bar
<i class = "material-icons custom"> wifi_tethering </ i> wifi_tethering
<i class = "material-icons custom"> signal_cellular_no_sim </ i> signal_cellular_no_sim
<i class = "material-icons custom"> signal_cellular_null </ i> signal_cellular_null
<i class = "material-icons custom"> signal_cellular_off </ i> signal_cellular_off
<i class = "material-icons custom"> signal_wifi_4_bar </ i> signal_wifi_4_bar
<i class = "material-icons custom"> signal_wifi_4_bar_lock </ i> signal_wifi_4_bar_lock
<i class = "material-icons custom"> signal_wifi_off </ i> signal_wifi_off
<iclass = "material-iconscustom">ストレージ</ i> ストレージ
<i class = "material-icons custom"> usb </ i> USB
<iclass = "material-iconscustom">壁紙</ i> 壁紙
<iclass = "material-iconscustom">ウィジェット</ i> ウィジェット
<i class = "material-icons custom"> wifi_lock </ i> wifi_lock
<i class = "material-icons custom"> signal_cellular_connected_no_internet_4_bar </ i> signal_cellular_connected_no_internet_4_bar