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 - Image Icons
Material - Image Icons
This chapter explains the usage of Google s (Material) Image icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given 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) Image icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −
| Usage | Result |
|---|---|
| <i class="material-icons custom">add_to_photos</i> | add_to_photos |
| <i class="material-icons custom">adjust</i> | adjust |
| <i class="material-icons custom">assistant</i> | assistant |
| <i class="material-icons custom">assistant</i> | assistant |
| <i class="material-icons custom">audiotrack</i> | audiotrack |
| <i class="material-icons custom">blur_circular</i> | blur_circular |
| <i class="material-icons custom">blur_pnear</i> | blur_pnear |
| <i class="material-icons custom">blur_off</i> | blur_off |
| <i class="material-icons custom">blur_on</i> | blur_on |
| <i class="material-icons custom">brightness_1</i> | brightness_1 |
| <i class="material-icons custom">brightness_2</i> | brightness_2 |
| <i class="material-icons custom">brightness_3</i> | brightness_3 |
| <i class="material-icons custom">brightness_4</i> | brightness_4 |
| <i class="material-icons custom">brightness_5</i> | brightness_5 |
| <i class="material-icons custom">brightness_6</i> | brightness_6 |
| <i class="material-icons custom">brightness_7</i> | brightness_7 |
| <i class="material-icons custom">broken_image</i> | broken_image |
| <i class="material-icons custom">brush</i> | brush |
| <i class="material-icons custom">camera</i> | camera |
| <i class="material-icons custom">camera_alt</i> | camera_alt |
| <i class="material-icons custom">camera_front</i> | camera_front |
| <i class="material-icons custom">camera_rear</i> | camera_rear |
| <i class="material-icons custom">camera_roll</i> | camera_roll |
| <i class="material-icons custom">center_focus_strong</i> | center_focus_strong |
| <i class="material-icons custom">center_focus_weak</i> | center_focus_weak |
| <i class="material-icons custom">collections</i> | collections |
| <i class="material-icons custom">collections_bookmark</i> | collections_bookmark |
| <i class="material-icons custom">color_lens</i> | color_lens |
| <i class="material-icons custom">colorize</i> | colorize |
| <i class="material-icons custom">compare</i> | compare |
| <i class="material-icons custom">control_point</i> | control_point |
| <i class="material-icons custom">control_point_duppcate</i> | control_point_duppcate |
| <i class="material-icons custom">crop</i> | crop |
| <i class="material-icons custom">crop_16_9</i> | crop_16_9 |
| <i class="material-icons custom">crop_3_2</i> | crop_3_2 |
| <i class="material-icons custom">crop_5_4</i> | crop_5_4 |
| <i class="material-icons custom">crop_7_5</i> | crop_7_5 |
| <i class="material-icons custom">crop_din</i> | crop_din |
| <i class="material-icons custom">crop_free</i> | crop_free |
| <i class="material-icons custom">crop_landscape</i> | crop_landscape |
| <i class="material-icons custom">crop_original</i> | crop_original |
| <i class="material-icons custom">crop_portrait</i> | crop_portrait |
| <i class="material-icons custom">crop_square</i> | crop_square |
| <i class="material-icons custom">dehaze</i> | dehaze |
| <i class="material-icons custom">details</i> | details |
| <i class="material-icons custom">edit</i> | edit |
| <i class="material-icons custom">exposure</i> | exposure |
| <i class="material-icons custom">exposure_neg_1</i> | exposure_neg_1 |
| <i class="material-icons custom">exposure_plus_1</i> | exposure_plus_1 |
| <i class="material-icons custom">exposure_plus_2</i> | exposure_plus_2 |
| <i class="material-icons custom">exposure_zero</i> | exposure_zero |
| <i class="material-icons custom">filter</i> | filter |
| <i class="material-icons custom">filter_1</i> | filter_1 |
| <i class="material-icons custom">filter_2</i> | filter_2 |
| <i class="material-icons custom">filter_3</i> | filter_3 |
| <i class="material-icons custom">filter_4</i> | filter_4 |
| <i class="material-icons custom">filter_5</i> | filter_5 |
| <i class="material-icons custom">filter_6</i> | filter_6 |
| <i class="material-icons custom">filter_7</i> | filter_7 |
| <i class="material-icons custom">filter_8</i> | filter_8 |
| <i class="material-icons custom">filter_9</i> | filter_9 |
| <i class="material-icons custom">filter_9_plus</i> | filter_9_plus |
| <i class="material-icons custom">filter_b_and_w</i> | filter_b_and_w |
| <i class="material-icons custom">filter_center_focus</i> | filter_center_focus |
| <i class="material-icons custom">filter_drama</i> | filter_drama |
| <i class="material-icons custom">filter_frames</i> | filter_frames |
| <i class="material-icons custom">filter_hdr</i> | filter_hdr |
| <i class="material-icons custom">filter_none</i> | filter_none |
| <i class="material-icons custom">filter_tilt_shift</i> | filter_tilt_shift |
| <i class="material-icons custom">filter_vintage</i> | filter_vintage |
| <i class="material-icons custom">flare</i> | flare |
| <i class="material-icons custom">flash_auto</i> | flash_auto |
| <i class="material-icons custom">flash_off</i> | flash_off |
| <i class="material-icons custom">flash_on</i> | flash_on |
| <i class="material-icons custom">fpp</i> | fpp |
| <i class="material-icons custom">gradient</i> | gradient |
| <i class="material-icons custom">grain</i> | grain |
| <i class="material-icons custom">grid_off</i> | grid_off |
| <i class="material-icons custom">grid_on</i> | grid_on |
| <i class="material-icons custom">hdr_off</i> | hdr_off |
| <i class="material-icons custom">hdr_on</i> | hdr_on |
| <i class="material-icons custom">hdr_strong</i> | hdr_strong |
| <i class="material-icons custom">hdr_weak</i> | hdr_weak |
| <i class="material-icons custom">heapng</i> | heapng |
| <i class="material-icons custom">image</i> | image |
| <i class="material-icons custom">image_aspect_ratio</i> | image_aspect_ratio |
| <i class="material-icons custom">iso</i> | iso |
| <i class="material-icons custom">landscape</i> | landscape |
| <i class="material-icons custom">leak_add</i> | leak_add |
| <i class="material-icons custom">leak_remove</i> | leak_remove |
| <i class="material-icons custom">lens</i> | lens |
| <i class="material-icons custom">looks</i> | looks |
| <i class="material-icons custom">looks_3</i> | looks_3 |
| <i class="material-icons custom">looks_4</i> | looks_4 |
| <i class="material-icons custom">looks_5</i> | looks_5 |
| <i class="material-icons custom">looks_6</i> | looks_6 |
| <i class="material-icons custom">looks_one</i> | looks_one |
| <i class="material-icons custom">looks_two</i> | looks_two |
| <i class="material-icons custom">loupe</i> | loupe |
| <i class="material-icons custom">monochrome_photos</i> | monochrome_photos |
| <i class="material-icons custom">movie_creation</i> | movie_creation |
| <i class="material-icons custom">music_note</i> | music_note |
| <i class="material-icons custom">nature</i> | nature |
| <i class="material-icons custom">nature_people</i> | nature_people |
| <i class="material-icons custom">wb_sunny</i> | wb_sunny |
| <i class="material-icons custom">navigate_next</i> | navigate_next |
| <i class="material-icons custom">navigate_before</i> | navigate_before |
| <i class="material-icons custom">palette</i> | palette |
| <i class="material-icons custom">panorama</i> | panorama |
| <i class="material-icons custom">panorama_fish_eye</i> | panorama_fish_eye |
| <i class="material-icons custom">panorama_horizontal</i> | panorama_horizontal |
| <i class="material-icons custom">panorama_vertical</i> | panorama_vertical |
| <i class="material-icons custom">panorama_wide_angle</i> | panorama_wide_angle |
| <i class="material-icons custom">photo</i> | photo |
| <i class="material-icons custom">photo_album</i> | photo_album |
| <i class="material-icons custom">photo_camera</i> | photo_camera |
| <i class="material-icons custom">photo_pbrary</i> | photo_pbrary |
| <i class="material-icons custom">photo_size_select_actual</i> | photo_size_select_actual |
| <i class="material-icons custom">photo_size_select_large</i> | photo_size_select_large |
| <i class="material-icons custom">photo_size_select_small</i> | photo_size_select_small |
| <i class="material-icons custom">picture_as_pdf</i> | picture_as_pdf |
| <i class="material-icons custom">portrait</i> | portrait |
| <i class="material-icons custom">remove_red_eye</i> | remove_red_eye |
| <i class="material-icons custom">rotate_90_degrees_ccw</i> | rotate_90_degrees_ccw |
| <i class="material-icons custom">rotate_left</i> | rotate_left |
| <i class="material-icons custom">rotate_right</i> | rotate_right |
| <i class="material-icons custom">spdeshow</i> | spdeshow |
| <i class="material-icons custom">straighten</i> | straighten |
| <i class="material-icons custom">style</i> | style |
| <i class="material-icons custom">switch_camera</i> | switch_camera |
| <i class="material-icons custom">switch_video</i> | switch_video |
| <i class="material-icons custom">tag_faces</i> | tag_faces |
| <i class="material-icons custom">texture</i> | texture |
| <i class="material-icons custom">timelapse</i> | timelapse |
| <i class="material-icons custom">timer</i> | timer |
| <i class="material-icons custom">timer_10</i> | timer_10 |
| <i class="material-icons custom">timer_3</i> | timer_3 |
| <i class="material-icons custom">timer_off</i> | timer_off |
| <i class="material-icons custom">tonapty</i> | tonapty |
| <i class="material-icons custom">transform</i> | transform |
| <i class="material-icons custom">tune</i> | tune |
| <i class="material-icons custom">view_comfy</i> | view_comfy |
| <i class="material-icons custom">view_compact</i> | view_compact |
| <i class="material-icons custom">vignette</i> | vignette |
| <i class="material-icons custom">wb_auto</i> | wb_auto |
| <i class="material-icons custom">wb_cloudy</i> | wb_cloudy |
| <i class="material-icons custom">wb_incandescent</i> | wb_incandescent |
| <i class="material-icons custom">wb_iridescent</i> | wb_iridescent |