Bahan - Ikon Tindakan
Bab ini menjelaskan penggunaan Ikon Tindakan (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 Ikon Tindakan (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"> 3d_rotation </i> | 3D_rotation |
| <i class = "material-icons custom"> aksesibilitas </i> | aksesibilitas |
| <i class = "material-icons custom"> keseimbangan_akun </i> | saldo rekening |
| <i class = "material-icons custom"> account_balance_wallet </i> | account_balance_wallet |
| <i class = "material-icons custom"> kotak_akun </i> | kotak_akun |
| <i class = "material-icons custom"> account_circle </i> | account_circle |
| <i class = "material-icons custom"> add_shopping_cart </i> | add_shopping_cart |
| <i class = "material-icons custom"> alarm </i> | alarm |
| <i class = "material-icons custom"> alarm_add </i> | alarm_add |
| <i class = "material-icons custom"> alarm_off </i> | alarm_off |
| <i class = "material-icons custom"> alarm_on </i> | alarm_on |
| <i class = "material-icons custom"> android </i> | android |
| <i class = "material-icons custom"> pengumuman </i> | pengumuman |
| <i class = "material-icons custom"> rasio_spek </i> | aspek_rasio |
| <i class = "material-icons custom"> penilaian </i> | penilaian |
| <i class = "material-icons custom"> tugas </i> | tugas |
| <i class = "material-icons custom"> assignment_ind </i> | assignment_ind |
| <i class = "material-icons custom"> assignment_late </i> | assignment_late |
| <i class = "material-icons custom"> assignment_return </i> | assignment_return |
| <i class = "material-icons custom"> assignment_returned </i> | assignment_returned |
| <i class = "material-icons custom"> assignment_turned_in </i> | assignment_turned_in |
| <i class = "material-icons custom"> perpanjangan otomatis </i> | Perbaharui Otomatis |
| <i class = "material-icons custom"> cadangan </i> | cadangan |
| <i class = "material-icons custom"> buku </i> | Book |
| <i class = "material-icons custom"> bookmark </i> | penanda buku |
| <i class = "material-icons custom"> bookmark_border </i> | bookmark_border |
| <i class = "material-icons custom"> bug_report </i> | bug_report |
| <i class = "material-icons custom"> build </i> | membangun |
| <i class = "material-icons custom"> dalam cache </i> | dalam cache |
| <i class = "material-icons custom"> camera_enhance </i> | camera_enhance |
| <i class = "material-icons custom"> card_giftcard </i> | card_giftcard |
| <i class = "material-icons custom"> card_membership </i> | card_membership |
| <i class = "material-icons custom"> card_travel </i> | card_travel |
| <i class = "material-icons custom"> change_history </i> | Ubah Sejarah |
| <i class = "material-icons custom"> check_circle </i> | check_circle |
| <i class = "material-icons custom"> chrome_reader_mode </i> | chrome_reader_mode |
| <i class = "material-icons custom"> kelas </i> | kelas |
| <i class = "material-icons custom"> kode </i> | kode |
| <i class = "material-icons custom"> credit_card </i> | kartu kredit |
| <i class = "material-icons custom"> dasbor </i> | dasbor |
| <i class = "material-icons custom"> hapus </i> | menghapus |
| <i class = "material-icons custom"> deskripsi </i> | deskripsi |
| <i class = "material-icons custom"> dns </i> | dns |
| <i class = "material-icons custom"> selesai </i> | selesai |
| <i class = "material-icons custom"> done_all </i> | selesai_semua |
| <i class = "material-icons custom"> keluarkan </i> | mengeluarkan |
| <i class = "material-icons custom"> acara </i> | peristiwa |
| <i class = "material-icons custom"> event_seat </i> | event_seat |
| <i class = "material-icons custom"> exit_to_app </i> | exit_to_app |
| <i class = "material-icons custom"> jelajahi </i> | jelajahi |
| <i class = "material-icons custom"> ekstensi </i> | perpanjangan |
| <i class = "material-icons custom"> wajah </i> | wajah |
| <i class = "material-icons custom"> favorit </i> | favorit |
| <i class = "material-icons custom"> favorite_border </i> | favorite_border |
| <i class = "material-icons custom"> umpan balik </i> | umpan balik |
| <i class = "material-icons custom"> find_in_page </i> | Temukan dihalaman |
| <i class = "material-icons custom"> find_replace </i> | find_replace |
| <i class = "material-icons custom"> flight_land </i> | flight_land |
| <i class = "material-icons custom"> flight_takeoff </i> | flight_takeoff |
| <i class = "material-icons custom"> flip_to_back </i> | flip_to_back |
| <i class = "material-icons custom"> flip_to_front </i> | flip_to_front |
| <i class = "material-icons custom"> get_app </i> | get_app |
| <i class = "material-icons custom"> gif </i> | gif |
| <i class = "material-icons custom"> nilai </i> | kelas |
| <i class = "material-icons custom"> group_work </i> | pekerjaan kelompok |
| <i class = "material-icons custom"> bantuan </i> | Tolong |
| <i class = "material-icons custom"> help_outline </i> | help_outline |
| <i class = "material-icons custom"> highlight_off </i> | highlight_off |
| <i class = "material-icons custom"> riwayat </i> | sejarah |
| <i class = "material-icons custom"> rumah </i> | rumah |
| <i class = "material-icons custom"> hourglass_empty </i> | hourglass_empty |
| <i class = "material-icons custom"> hourglass_full </i> | hourglass_full |
| <i class = "material-icons custom"> http </i> | http |
| <i class = "material-icons custom"> https </i> | https |
| <i class = "material-icons custom"> info </i> | info |
| <i class = "material-icons custom"> info_outline </i> | info_outline |
| <i class = "material-icons custom"> masukan </i> | memasukkan |
| <i class = "material-icons custom"> invert_colors </i> | invert_colors |
| <i class = "material-icons custom"> label </i> | label |
| <i class = "material-icons custom"> label_outline </i> | label_outline |
| <i class = "material-icons custom"> bahasa </i> | bahasa |
| <i class = "material-icons custom"> luncurkan </i> | meluncurkan |
| <i class = "material-icons custom"> daftar </i> | daftar |
| <i class = "material-icons custom"> kunci </i> | mengunci |
| <i class = "material-icons custom"> lock_open </i> | lock_open |
| <i class = "material-icons custom"> lock_outline </i> | lock_outline |
| <i class = "material-icons custom"> loyalitas </i> | loyalitas |
| <i class = "material-icons custom"> markunread_mailbox </i> | markunread_mailbox |
| <i class = "material-icons custom"> note_add </i> | note_add |
| <i class = "material-icons custom"> offline_pin </i> | offline_pin |
| <i class = "material-icons custom"> open_in_browser </i> | Buka di browser |
| <i class = "material-icons custom"> open_in_new </i> | open_in_new |
| <i class = "material-icons custom"> open_with </i> | Buka dengan |
| <i class = "material-icons custom"> tampilan halaman </i> | tampilan halaman |
| <i class = "material-icons custom"> pembayaran </i> | pembayaran |
| <i class = "material-icons custom"> perm_camera_mic </i> | perm_camera_mic |
| <i class = "material-icons custom"> perm_contact_cale </i> | perm_contact_cale |
| <i class = "material-icons custom"> perm_data_settings </i> | perm_data_settings |
| <i class = "material-icons custom"> perm_device_information </i> | perm_device_information |
| <i class = "material-icons custom"> perm_identity </i> | perm_identity |
| <i class = "material-icons custom"> perm_media </i> | perm_media |
| <i class = "material-icons custom"> perm_phone_msg </i> | perm_phone_msg |
| <i class = "material-icons custom"> perm_scan_wifi </i> | perm_scan_wifi |
| <i class = "material-icons custom"> picture_in_picture </i> | gambar di dalam gambar |
| <i class = "material-icons custom"> play_for_work </i> | play_for_work |
| <i class = "material-icons custom"> polimer </i> | polimer |
| <i class = "material-icons custom"> power_settings_new </i> | power_settings_new |
| <i class = "material-icons custom"> cetak </i> | mencetak |
| <i class = "material-icons custom"> query_builder </i> | query_builder |
| <i class = "material-icons custom"> question_answer </i> | question_answer |
| <i class = "material-icons custom"> tanda terima </i> | resi |
| <i class = "material-icons custom"> tebus </i> | menebus |
| <i class = "material-icons custom"> susun ulang </i> | menyusun ulang |
| <i class = "material-icons custom"> report_problem </i> | Laporkan masalah |
| <i class = "material-icons custom"> pulihkan </i> | mengembalikan |
| <i class = "material-icons custom"> ruangan </i> | kamar |
| <i class = "material-icons custom"> jadwal </i> | susunan acara |
| <i class = "material-icons custom"> penelusuran </i> | search |
| <i class="material-icons custom">settings</i> | settings |
| <i class="material-icons custom">settings_applications</i> | settings_applications |
| <i class="material-icons custom">settings_bluetooth</i> | settings_bluetooth |
| <i class="material-icons custom">settings_brightness</i> | settings_brightness |
| <i class="material-icons custom">settings_cell</i> | settings_cell |
| <i class="material-icons custom">settings_ethernet</i> | settings_ethernet |
| <i class="material-icons custom">settings_input_antenna</i> | settings_input_antenna |
| <i class="material-icons custom">settings_input_component</i> | settings_input_component |
| <i class="material-icons custom">settings_input_hdmi</i> | settings_input_hdmi |
| <i class="material-icons custom">settings_input_svideo</i> | settings_input_svideo |
| <i class="material-icons custom">settings_overscan</i> | settings_overscan |
| <i class="material-icons custom">settings_phone</i> | settings_phone |
| <i class="material-icons custom">settings_power</i> | settings_power |
| <i class="material-icons custom">settings_remote</i> | settings_remote |
| <i class="material-icons custom">settings_voice</i> | settings_voice |
| <i class="material-icons custom">shop</i> | shop |
| <i class="material-icons custom">shop_two</i> | shop_two |
| <i class="material-icons custom">shopping_basket</i> | shopping_basket |
| <i class="material-icons custom">shopping_cart</i> | shopping_cart |
| <i class="material-icons custom">speaker_notes</i> | speaker_notes |
| <i class="material-icons custom">spellcheck</i> | spellcheck |
| <i class="material-icons custom">star_rate</i> | star_rate |
| <i class="material-icons custom">stars</i> | stars |
| <i class="material-icons custom">store</i> | store |
| <i class="material-icons custom">subject</i> | subject |
| <i class="material-icons custom">supervisor_account</i> | supervisor_account |
| <i class="material-icons custom">swap_horiz</i> | swap_horiz |
| <i class="material-icons custom">swap_vert</i> | swap_vert |
| <i class="material-icons custom">swap_vertical_circle</i> | swap_vertical_circle |
| <i class="material-icons custom">system_update_alt</i> | system_update_alt |
| <i class="material-icons custom">tab</i> | tab |
| <i class="material-icons custom">tab_unselected</i> | tab_unselected |
| <i class="material-icons custom">theaters</i> | theaters |
| <i class="material-icons custom">thumb_down</i> | thumb_down |
| <i class="material-icons custom">thumb_up</i> | thumb_up |
| <i class="material-icons custom">thumbs_up_down</i> | thumbs_up_down |
| <i class="material-icons custom">toc</i> | toc |
| <i class="material-icons custom">today</i> | today |
| <i class="material-icons custom">toll</i> | toll |
| <i class="material-icons custom">track_changes</i> | track_changes |
| <i class="material-icons custom">translate</i> | translate |
| <i class="material-icons custom">trending_down</i> | trending_down |
| <i class="material-icons custom">trending_flat</i> | trending_flat |
| <i class="material-icons custom">trending_up</i> | trending_up |
| <i class="material-icons custom">turned_in</i> | turned_in |
| <i class="material-icons custom">verified_user</i> | verified_user |
| <i class="material-icons custom">view_agenda</i> | view_agenda |
| <i class="material-icons custom">view_array</i> | view_array |
| <i class="material-icons custom">view_carousel</i> | view_carousel |
| <i class="material-icons custom">view_column</i> | view_column |
| <i class="material-icons custom">view_day</i> | view_day |
| <i class="material-icons custom">view_headline</i> | view_headline |
| <i class="material-icons custom">view_list</i> | view_list |
| <i class="material-icons custom">view_module</i> | view_module |
| <i class="material-icons custom">view_quilt</i> | view_quilt |
| <i class="material-icons custom">view_stream</i> | view_stream |
| <i class="material-icons custom">view_week</i> | view_week |
| <i class="material-icons custom">visibility</i> | visibility |
| <i class="material-icons custom">visibility_off</i> | visibility_off |
| <i class="material-icons custom">work</i> | work |
| <i class="material-icons custom">youtube_searched_for</i> | youtube_searched_for |
| <i class="material-icons custom">zoom_in</i> | zoom_in |
| <i class="material-icons custom">zoom_out</i> | zoom_out |