- Web Icons Tutorial
- Web Icons - Home
- Web Icons - Introduction
- Font Awesome
- Font Awesome Icons
- Font Awesome - Web Icons
- Font Awesome - Hand Icons
- Font Awesome - Transportation Icons
- Font Awesome - Gender Icons
- Font Awesome - File Type Icons
- Font Awesome - Spinner Icons
- Font Awesome - Form Control Icons
- Font Awesome - Payment Icons
- Font Awesome - Chart Icons
- Font Awesome - Currency Icons
- Font Awesome - Text Editor Icons
- Font Awesome - Directional Icons
- Font Awesome - Video Player Icons
- Font Awesome - Brand Icons
- Font Awesome - Medical Icons
- Material Icons
- Material Icons
- Material - Action Icons
- Material - Alert Icons
- Material - AV Icons
- Material - Communication Icons
- Material - Content Icons
- Material - Device Icons
- Material - Editor Icons
- Material - File Icons
- Material - Hardware Icons
- Material - Image Icons
- Material - Maps Icons
- Material - Navigation Icons
- Material - Notification Icons
- Material - Social Icons
- Material - Toggle Icons
- Bootstrap Glyphicons
- Bootstrap Glyphicons
- Bootstrap - Components
- Web Icons Useful Resources
- Web Icons - Quick Guide
- Web Icons - Useful Resources
- Web Icons - Discussion
Material - Device Icons
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