Bahan - Ikon Gambar
Bab ini menjelaskan penggunaan ikon Gambar (Material) Google. Asumsikan bahwacustom adalah nama kelas CSS tempat kami menentukan ukuran dan warna, seperti yang ditunjukkan pada contoh yang diberikan di bawah ini.
<!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>Tabel berikut berisi penggunaan dan hasil dari ikon Gambar (Material) Google. Ganti tag <body> dari program di atas dengan kode yang diberikan dalam tabel untuk mendapatkan output masing-masing -
| Pemakaian | Hasil |
|---|---|
| <i class = "material-icons custom"> add_to_photos </i> | add_to_photos |
| <i class = "material-icons custom"> sesuaikan </i> | menyesuaikan |
| <i class = "material-icons custom"> asisten </i> | asisten |
| <i class = "material-icons custom"> asisten </i> | asisten |
| <i class = "material-icons custom"> audiotrack </i> | audiotrack |
| <i class = "material-icons custom"> blur_circular </i> | blur_circular |
| <i class = "material-icons custom"> blur_linear </i> | blur_linear |
| <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> | kecerahan_5 |
| <i class = "material-icons custom"> brightness_6 </i> | kecerahan_6 |
| <i class = "material-icons custom"> brightness_7 </i> | kecerahan_7 |
| <i class = "material-icons custom"> broken_image </i> | broken_image |
| <i class = "material-icons custom"> kuas </i> | sikat |
| <i class = "material-icons custom"> kamera </i> | kamera |
| <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"> koleksi </i> | koleksi |
| <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"> warnai </i> | mewarnai |
| <i class = "material-icons custom"> bandingkan </i> | membandingkan |
| <i class = "material-icons custom"> control_point </i> | control_point |
| <i class = "material-icons custom"> control_point_duplicate </i> | control_point_duplicate |
| <i class = "material-icons custom"> pangkas </i> | tanaman |
| <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"> detail </i> | detailnya |
| <i class = "material-icons custom"> edit </i> | edit |
| <i class = "material-icons custom"> eksposur </i> | paparan |
| <i class = "material-icons custom"> exposure_neg_1 </i> | eksposur_neg_1 |
| <i class = "material-icons custom"> exposure_plus_1 </i> | eksposur_plus_1 |
| <i class = "material-icons custom"> exposure_plus_2 </i> | eksposur_plus_2 |
| <i class = "material-icons custom"> exposure_zero </i> | eksposur_zero |
| <i class = "material-icons custom"> filter </i> | Saring |
| <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"> suar </i> | suar |
| <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"> flip </i> | Balik |
| <i class = "material-icons custom"> gradien </i> | gradien |
| <i class = "material-icons custom"> butir </i> | gandum |
| <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"> penyembuhan </i> | penyembuhan |
| <i class = "material-icons custom"> gambar </i> | gambar |
| <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"> lanskap </i> | pemandangan |
| <i class = "material-icons custom"> leak_add </i> | kebocoran_add |
| <i class = "material-icons custom"> kebocoran_remove </i> | kebocoran_remove |
| <i class = "material-icons custom"> lensa </i> | lensa |
| <i class = "material-icons custom"> tampilan </i> | penampilan |
| <i class = "material-icons custom" >look_3 </i> | tampak_3 |
| <i class = "material-icons custom" >look_4 </i> | terlihat_4 |
| <i class = "material-icons custom" >look_5 </i> | penampilan_5 |
| <i class = "material-icons custom" >look_6 </i> | penampilan_6 |
| <i class = "material-icons custom" >look_one </i> | look_one |
| <i class = "material-icons custom" >look_two </i> | tampak_dua |
| <i class = "material-icons custom"> pembesar </i> | alat pembesar |
| <i class = "material-icons custom"> monokrom_photos </i> | monokrom_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"> alam </i> | alam |
| <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"> navigation_next </i> | navigation_next |
| <i class = "material-icons custom"> navigation_before </i> | navigation_before |
| <i class = "material-icons custom"> palet </i> | palet |
| <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"> foto </i> | foto |
| <i class = "material-icons custom"> photo_album </i> | album Foto |
| <i class = "material-icons custom"> photo_camera </i> | kamera foto |
| <i class = "material-icons custom"> photo_library </i> | photo_library |
| <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> | gambar_as_pdf |
| <i class = "material-icons custom"> potret </i> | potret |
| <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> | Putar ke kanan |
| <i class = "material-icons custom"> slideshow </i> | slideshow |
| <i class = "material-icons custom"> luruskan </i> | meluruskan |
| <i class = "material-icons custom"> gaya </i> | gaya |
| <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"> tekstur </i> | tekstur |
| <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"> nada suara </i> | nada suara |
| <i class = "material-icons custom"> transformasi </i> | mengubah |
| <i class = "material-icons custom"> selaraskan </i> | lagu |
| <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"> vinyet </i> | skema |
| <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 |