Material - Device Icons

Quiz

This chapter provides you the usage of Google's (Material) Device Icons. Assume that custom is the CSS class name in which we defined the size and colour as shown below.

<!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>

The following table contains the usage and results of Google's (Material) Device Icons.

Usage	Result
<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>

Print Page