Web Icons Tutorial
Font Awesome
Material Icons
Bootstrap Glyphicons
Web Icons Useful Resources
Selected Reading
Font Awesome
- Font Awesome - Medical Icons
- Font Awesome - Brand Icons
- Font Awesome - Video Player Icons
- Font Awesome - Directional Icons
- Font Awesome - Text Editor Icons
- Font Awesome - Currency Icons
- Font Awesome - Chart Icons
- Font Awesome - Payment Icons
- Font Awesome - Form Control Icons
- Font Awesome - Spinner Icons
- Font Awesome - File Type Icons
- Font Awesome - Gender Icons
- Font Awesome - Transportation Icons
- Font Awesome - Hand Icons
- Font Awesome - Web Icons
- Font Awesome Icons
Material Icons
- Material - Toggle Icons
- Material - Social Icons
- Material - Notification Icons
- Material - Navigation Icons
- Material - Maps Icons
- Material - Image Icons
- Material - Hardware Icons
- Material - File Icons
- Material - Editor Icons
- Material - Device Icons
- Material - Content Icons
- Material - Communication Icons
- Material - AV Icons
- Material - Alert Icons
- Material - Action Icons
- Material Icons
Bootstrap Glyphicons
Web Icons Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Material - Device Icons
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>
<pnk 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">accessibipty</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 |