Material - Device Icons

Advertisements

Previous Page
Next Page  

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