材料 - 设备图标

本章为您提供 Google (Material) 设备图标的使用方法。假设 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 (Material) 设备图标的使用方法和结果。

用法	结果
<i class="material-icons custom">access_alarm</i>
<i class="material-icons custom">access_alarms</i>
<i class="material-icons custom">access_time</i>
<i class="material-icons custom">add_alarm</i>
<i class="material-icons custom">airplanemode_active</i>
<i class="material-icons custom">airplanemode_inactive</i>
<i class="material-icons custom">battery_alert</i>
<i class="material-icons custom">battery_charging_full</i>
<i class="material-icons custom">battery_full</i>
<i class="material-icons custom">battery_std</i>
<i class="material-icons custom">battery_unknown</i>
<i class="material-icons custom">bluetooth</i>
<i class="material-icons custom">bluetooth_connected</i>
<i class="material-icons custom">bluetooth_disabled</i>
<i class="material-icons custom">bluetooth_searching</i>
<i class="material-icons custom">brightness_auto</i>
<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>
<i class="material-icons custom">devices</i>
<i class="material-icons custom">dvr</i>
<i class="material-icons custom">gps_fixed</i>
<i class="material-icons custom">gps_not_fixed</i>
<i class="material-icons custom">gps_off</i>
<i class="material-icons custom">graphic_eq</i>
<i class="material-icons custom">location_disabled</i>
<i class="material-icons custom">location_searching</i>
<i class="material-icons custom">network_cell</i>
<i class="material-icons custom">network_wifi</i>
<i class="material-icons custom">screen_lock_landscape</i>
<i class="material-icons custom">screen_lock_portrait</i>
<i class="material-icons custom">screen_lock_rotation</i>
<i class="material-icons custom">screen_rotation</i>
<i class="material-icons custom">sd_storage</i>
<i class="material-icons custom">settings_system_daydream</i>
<i class="material-icons custom">signal_cellular_4_bar</i>
<i class="material-icons custom">wifi_tethering</i>
<i class="material-icons custom">signal_cellular_no_sim</i>
<i class="material-icons custom">signal_cellular_null</i>
<i class="material-icons custom">signal_cellular_off</i>
<i class="material-icons custom">signal_wifi_4_bar</i>
<i class="material-icons custom">signal_wifi_4_bar_lock</i>
<i class="material-icons custom">signal_wifi_off</i>
<i class="material-icons custom">storage</i>
<i class="material-icons custom">usb</i>
<i class="material-icons custom">wallpaper</i>
<i class="material-icons custom">widgets</i>
<i class="material-icons custom">wifi_lock</i>
<i class="material-icons custom">signal_cellular_connected_no_internet_4_bar</i>

打印页面