素材-デバイスアイコン

この章では、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の（素材）デバイスアイコンの使用法と結果が含まれています。

Usage	Result
<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>	access_time
<i class="material-icons custom">add_alarm</i>	add_alarm
<i class="material-icons custom">airplanemode_active</i>	airplanemode_active
<i class="material-icons custom">airplanemode_inactive</i>	airplanemode_inactive
<i class="material-icons custom">battery_alert</i>	battery_alert
<i class="material-icons custom">battery_charging_full</i>	battery_charging_full
<i class="material-icons custom">battery_full</i>	battery_full
<i class="material-icons custom">battery_std</i>	battery_std
<i class="material-icons custom">battery_unknown</i>	battery_unknown
<i class="material-icons custom">bluetooth</i>	bluetooth
<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>	brightness_auto
<i class="material-icons custom">brightness_high</i>	brightness_high
<i class="material-icons custom">brightness_low</i>	brightness_low
<i class="material-icons custom">brightness_medium</i>	brightness_medium
<i class="material-icons custom">data_usage</i>	data_usage
<i class="material-icons custom">developer_mode</i>	developer_mode
<i class="material-icons custom">devices</i>	devices
<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>	screen_rotation
<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
<i class="material-icons custom">storage</i>	storage
<i class="material-icons custom">usb</i>	usb
<i class="material-icons custom">wallpaper</i>	wallpaper
<i class="material-icons custom">widgets</i>	widgets
<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

Web-icons-material-device-icons

素材-デバイスアイコン