Vật liệu - Biểu tượng Hành động
Chương này giải thích việc sử dụng các Biểu tượng Hành động (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.
<!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>Bảng sau đây chứa cách sử dụng và kết quả của các Biểu tượng Hành động (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -
| Sử dụng | Kết quả |
|---|---|
| <i class = "material-icon custom"> 3d_rotation </i> | 3d_rotation |
| <i class = "material-icon custom"> khả năng tiếp cận </i> | khả năng tiếp cận |
| <i class = "material-icon custom"> account_balance </i> | số dư tài khoản |
| <i class = "material-icon custom"> account_balance_wallet </i> | account_balance_wallet |
| <i class = "material-icon custom"> account_box </i> | account_box |
| <i class = "material-icon custom"> account_circle </i> | account_circle |
| <i class = "material-icon custom"> add_shopping_cart </i> | add_shopping_cart |
| <i class = "material-icon custom"> báo thức </i> | báo thức |
| <i class = "material-icon custom"> alert_add </i> | alert_add |
| <i class = "material-icon custom"> alert_off </i> | alert_off |
| <i class = "material-icon custom"> alert_on </i> | alert_on |
| <i class = "material-icon custom"> android </i> | android |
| <i class = "material-icon custom"> thông báo </i> | sự thông báo |
| <i class = "material-icon custom"> khía cạnh_ratio </i> | khía cạnh_ratio |
| <i class = "material-icon custom"> đánh giá </i> | thẩm định, lượng định, đánh giá |
| <i class = "material-icon custom"> chuyển nhượng </i> | sự phân công |
| <i class = "material-icon custom"> delivery_ind </i> | phân_cần |
| <i class = "material-icon custom"> task_late </i> | phân_lục |
| <i class = "material-icon custom"> delivery_return </i> | task_return |
| <i class = "material-icon custom"> delivery_returned </i> | phân_cấp |
| <i class = "material-icon custom"> delivery_turned_in </i> | task_turned_in |
| <i class = "material-icon custom"> autorenew </i> | autorenew |
| <i class = "material-icon custom"> sao lưu </i> | sao lưu |
| <i class = "material-icon custom"> book </i> | sách |
| <i class = "material-icon custom"> dấu trang </i> | dấu trang |
| <i class = "material-icon custom"> bookmark_border </i> | bookmark_border |
| <i class = "material-icon custom"> bug_report </i> | báo cáo lỗi |
| <i class = "material-icon custom"> build </i> | xây dựng |
| <i class = "material-icon custom"> được lưu vào bộ nhớ đệm </i> | được lưu vào bộ nhớ đệm |
| <i class = "material-icon custom"> camera_enhance </i> | camera_enhance |
| <i class = "material-icon custom"> card_giftcard </i> | card_giftcard |
| <i class = "material-icon custom"> card_membership </i> | card_membership |
| <i class = "material-icon custom"> card_travel </i> | card_travel |
| <i class = "material-icon custom"> change_history </i> | thay đổi lịch sử |
| <i class = "material-icon custom"> check_circle </i> | check_circle |
| <i class = "material-icon custom"> chrome_reader_mode </i> | chrome_reader_mode |
| <i class = "material-icon custom"> class </i> | lớp học |
| <i class = "material-icon custom"> mã </i> | mã |
| <i class = "material-icon custom"> credit_card </i> | thẻ tín dụng |
| <i class = "material-icon custom"> bảng điều khiển </i> | bảng điều khiển |
| <i class = "material-icon custom"> xóa </i> | xóa bỏ |
| <i class = "material-icon custom"> description </i> | sự miêu tả |
| <i class = "material-icon custom"> dns </i> | dns |
| <i class = "material-icon custom"> xong </i> | làm xong |
| <i class = "material-icon custom"> done_all </i> | đã hoàn thành tất cả |
| <i class = "material-icon custom"> đẩy ra </i> | đẩy ra |
| <i class = "material-icon custom"> sự kiện </i> | biến cố |
| <i class = "material-icon custom"> event_seat </i> | event_seat |
| <i class = "material-icon custom"> exit_to_app </i> | exit_to_app |
| <i class = "material-icon custom"> khám phá </i> | khám phá |
| <i class = "material-icon custom"> extension </i> | sự mở rộng |
| <i class = "material-icon custom"> face </i> | khuôn mặt |
| <i class = "material-icon custom"> yêu thích </i> | yêu thích |
| <i class = "material-icon custom"> favourite_border </i> | yêu thích_border |
| <i class = "material-icon custom"> phản hồi </i> | Phản hồi |
| <i class = "material-icon custom"> find_in_page </i> | Tìm ở trang |
| <i class = "material-icon custom"> find_replace </i> | Tìm thay thế |
| <i class = "material-icon custom"> flight_land </i> | Flight_land |
| <i class = "material-icon custom"> flight_takeoff </i> | Flight_takeoff |
| <i class = "material-icon custom"> flip_to_back </i> | flip_to_back |
| <i class = "material-icon custom"> flip_to_front </i> | flip_to_front |
| <i class = "material-icon custom"> get_app </i> | get_app |
| <i class = "material-icon custom"> gif </i> | gif |
| <i class = "material-icon custom"> grade </i> | cấp |
| <i class = "material-icon custom"> group_work </i> | group_work |
| <i class = "material-icon custom"> trợ giúp </i> | Cứu giúp |
| <i class = "material-icon custom"> help_outline </i> | help_outline |
| <i class = "material-icon custom"> highlight_off </i> | highlight_off |
| <i class = "material-icon custom"> history </i> | lịch sử |
| <i class = "material-icon custom"> home </i> | Trang Chủ |
| <i class = "material-icon custom"> hourglass_empty </i> | đồng hồ cát_empty |
| <i class = "material-icon custom"> hourglass_full </i> | clockglass_full |
| <i class = "material-icon custom"> http </i> | http |
| <i class = "material-icon custom"> https </i> | https |
| <i class = "material-icon custom"> thông tin </i> | thông tin |
| <i class = "material-icon custom"> info_outline </i> | info_outline |
| <i class = "material-icon custom"> input </i> | đầu vào |
| <i class = "material-icon custom"> invert_colors </i> | invert_colors |
| <i class = "material-icon custom"> nhãn </i> | nhãn |
| <i class = "material-icon custom"> label_outline </i> | label_outline |
| <i class = "material-icon custom"> ngôn ngữ </i> | ngôn ngữ |
| <i class = "material-icon custom"> khởi chạy </i> | phóng |
| <i class = "material-icon custom"> danh sách </i> | danh sách |
| <i class = "material-icon custom"> lock </i> | Khóa |
| <i class = "material-icon custom"> lock_open </i> | lock_open |
| <i class = "material-icon custom"> lock_outline </i> | lock_outline |
| <i class = "material-icon custom"> lòng trung thành </i> | lòng trung thành |
| <i class = "material-icon custom"> markunread_mailbox </i> | markunread_mailbox |
| <i class = "material-icon custom"> note_add </i> | note_add |
| <i class = "material-icon custom"> offline_pin </i> | offline_pin |
| <i class = "material-icon custom"> open_in_browser </i> | mở trong trình duyệt |
| <i class = "material-icon custom"> open_in_new </i> | open_in_new |
| <i class = "material-icon custom"> open_with </i> | mở với |
| <i class = "material-icon custom"> lượt xem trang </i> | lượt xem trang |
| <i class = "material-icon custom"> thanh toán </i> | thanh toán |
| <i class = "material-icon custom"> perm_camera_mic </i> | perm_camera_mic |
| <i class = "material-icon custom"> perm_contact_cale </i> | perm_contact_cale |
| <i class = "material-icon custom"> perm_data_settings </i> | perm_data_settings |
| <i class = "material-icon custom"> perm_device_information </i> | perm_device_information |
| <i class = "material-icon custom"> perm_identity </i> | perm_identity |
| <i class = "material-icon custom"> perm_media </i> | perm_media |
| <i class = "material-icon custom"> perm_phone_msg </i> | perm_phone_msg |
| <i class = "material-icon custom"> perm_scan_wifi </i> | perm_scan_wifi |
| <i class = "material-icon custom"> picture_in_picture </i> | hình ảnh trong ảnh |
| <i class = "material-icon custom"> play_for_work </i> | play_for_work |
| <i class = "material-icon custom"> polyme </i> | polyme |
| <i class = "material-icon custom"> power_settings_new </i> | power_settings_new |
| <i class = "material-icon custom"> print </i> | in |
| <i class = "material-icon custom"> query_builder </i> | query_builder |
| <i class = "material-icon custom"> question_answer </i> | trả lời câu hỏi |
| <i class = "material-icon custom"> biên lai </i> | biên lai |
| <i class = "material-icon custom"> mua lại </i> | chuộc lại |
| <i class = "material-icon custom"> sắp xếp lại </i> | sắp xếp lại |
| <i class = "material-icon custom"> report_problem </i> | report_problem |
| <i class = "material-icon custom"> khôi phục </i> | khôi phục lại |
| <i class = "material-icon custom"> room </i> | phòng |
| <i class = "material-icon custom"> lịch trình </i> | lịch trình |
| <i class = "material-icon custom"> tìm kiếm </i> | Tìm kiếm |
| <i class = "material-icon custom"> cài đặt </i> | cài đặt |
| <i class = "material-icon custom"> settings_application </i> | settings_application |
| <i class = "material-icon custom"> settings_bl Bluetooth </i> | settings_bl Bluetooth |
| <i class = "material-icon custom"> settings_brightness </i> | settings_brightness |
| <i class = "material-icon custom"> settings_cell </i> | settings_cell |
| <i class = "material-icon custom"> settings_ethernet </i> | settings_ethernet |
| <i class = "material-icon custom"> settings_input_antenna </i> | settings_input_antenna |
| <i class = "material-icon custom"> settings_input_component </i> | settings_input_component |
| <i class = "material-icon custom"> settings_input_hdmi </i> | settings_input_hdmi |
| <i class = "material-icon custom"> settings_input_svideo </i> | settings_input_svideo |
| <i class = "material-icon custom"> settings_overscan </i> | settings_overscan |
| <i class = "material-icon custom"> settings_phone </i> | settings_phone |
| <i class = "material-icon custom"> settings_power </i> | settings_power |
| <i class = "material-icon custom"> settings_remote </i> | settings_remote |
| <i class = "material-icon custom"> settings_voice </i> | settings_voice |
| <i class = "material-icon custom"> shop </i> | cửa tiệm |
| <i class = "material-icon custom"> shop_two </i> | shop_two |
| <i class = "material-icon custom"> shopping_basket </i> | giỏ mua sắm |
| <i class = "material-icon custom"> shopping_cart </i> | shopping_cart |
| <i class = "material-icon custom"> speaker_notes </i> | Speaker_notes |
| <i class = "material-icon custom"> kiểm tra chính tả </i> | kiểm tra chính tả |
| <i class = "material-icon custom"> star_rate </i> | star_rate |
| <i class = "material-icon custom"> sao </i> | sao |
| <i class = "material-icon custom"> store </i> | cửa hàng |
| <i class = "material-icon custom"> chủ đề </i> | môn học |
| <i class = "material-icon custom"> supervisor_account </i> | supervisor_account |
| <i class = "material-icon custom"> swap_horiz </i> | swap_horiz |
| <i class = "material-icon custom"> swap_vert </i> | swap_vert |
| <i class = "material-icon custom"> swap_vertical_circle </i> | swap_vertical_circle |
| <i class = "material-icon custom"> system_update_alt </i> | system_update_alt |
| <i class = "material-icon custom"> tab </i> | chuyển hướng |
| <i class = "material-icon custom"> tab_unselected </i> | tab_unselected |
| <i class = "material-icon custom"> rạp hát </i> | rạp hát |
| <i class = "material-icon custom"> thumb_down </i> | thumb_down |
| <i class = "material-icon custom"> thumb_up </i> | đưa ngón cái lên |
| <i class = "material-icon custom"> thumbs_up_down </i> | thumbs_up_down |
| <i class = "material-icon custom"> toc </i> | toc |
| <i class = "material-icon custom"> hôm nay </i> | hôm nay |
| <i class = "material-icon custom"> số điện thoại </i> | thu phí |
| <i class = "material-icon custom"> track_changes </i> | track_changes |
| <i class = "material-icon custom"> dịch </i> | Phiên dịch |
| <i class = "material-icon custom"> trending_down </i> | trending_down |
| <i class = "material-icon custom"> trending_flat </i> | trending_flat |
| <i class = "material-icon custom"> trending_up </i> | xu hướng_up |
| <i class = "material-icon custom"> turn_in </i> | turn_in |
| <i class = "material-icon custom"> verify_user </i> | người dùng đã xác minh |
| <i class = "material-icon custom"> view_agenda </i> | view_agenda |
| <i class = "material-icon custom"> view_array </i> | view_array |
| <i class = "material-icon custom"> view_carousel </i> | view_carousel |
| <i class = "material-icon custom"> view_column </i> | view_column |
| <i class = "material-icon custom"> view_day </i> | view_day |
| <i class = "material-icon custom"> view_headline </i> | view_headline |
| <i class = "material-icon custom"> view_list </i> | danh sách xem |
| <i class = "material-icon custom"> view_module </i> | view_module |
| <i class = "material-icon custom"> view_quilt </i> | view_quilt |
| <i class = "material-icon custom"> view_stream </i> | view_stream |
| <i class = "material-icon custom"> view_week </i> | view_week |
| <i class = "material-icon custom"> khả năng hiển thị </i> | hiển thị |
| <i class = "material-icon custom"> display_off </i> | khả năng hiển thị |
| <i class = "material-icon custom"> work </i> | công việc |
| <i class = "material-icon custom"> youtube_searched_for </i> | youtube_searched_for |
| <i class = "material-icon custom"> zoom_in </i> | phóng to |
| <i class = "material-icon custom"> zoom_out </i> | thu nhỏ |