Material - Aktionssymbole
In diesem Kapitel wird die Verwendung der (materiellen) Aktionssymbole von Google erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.
<!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>Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Aktionssymbole von Google (Material). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -
| Verwendung | Ergebnis |
|---|---|
| <i class = "material-icons custom"> 3d_rotation </ i> | 3d_rotation |
| <i class = "material-icons custom"> Barrierefreiheit </ i> | Barrierefreiheit |
| <i class = "material-icons custom"> account_balance </ i> | Kontostand |
| <i class = "material-icons custom"> account_balance_wallet </ i> | account_balance_wallet |
| <i class = "material-icons custom"> account_box </ i> | account_box |
| <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"> Ankündigung </ i> | Ankündigung |
| <i class = "material-icons custom"> Seitenverhältnis </ i> | Seitenverhältnis |
| <i class = "material-icons custom"> Bewertung </ i> | Bewertung |
| <i class = "material-icons custom"> Zuweisung </ i> | Zuordnung |
| <i class = "material-icons custom"> Zuweisungsind </ i> | Zuordnung_ind |
| <i class = "material-icons custom"> Zuweisungsliste </ i> | Zuweisungsliste |
| <i class = "material-icons custom"> Zuweisungsreturn </ i> | Zuweisung_return |
| <i class = "material-icons custom"> Zuweisung zurückgegeben </ i> | Zuordnung_returned |
| <i class = "material-icons custom"> Zuweisung_umgedreht_in </ i> | Zuordnung_umgedreht_in |
| <i class = "material-icons custom"> automatisch erneuern </ i> | Automatische Verlängerung |
| <i class = "material-icons custom"> backup </ i> | Backup |
| <i class = "material-icons custom"> Buch </ i> | Buch |
| <i class = "material-icons custom"> Lesezeichen </ i> | Lesezeichen |
| <i class = "material-icons custom"> bookmark_border </ i> | bookmark_border |
| <i class = "material-icons custom"> bug_report </ i> | Fehlerbericht |
| <i class = "material-icons custom"> build </ i> | bauen |
| <i class = "material-icons custom"> zwischengespeichert </ i> | zwischengespeichert |
| <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> | Geschichte verändern |
| <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"> Klasse </ i> | Klasse |
| <i class = "material-icons custom"> Code </ i> | Code |
| <i class = "material-icons custom"> Kreditkarte </ i> | Kreditkarte |
| <i class = "material-icons custom"> Dashboard </ i> | Instrumententafel |
| <i class = "material-icons custom"> löschen </ i> | löschen |
| <i class = "material-icons custom"> Beschreibung </ i> | Beschreibung |
| <i class = "material-icons custom"> DNS </ i> | DNS |
| <i class = "material-icons custom"> erledigt </ i> | getan |
| <i class = "material-icons custom"> done_all </ i> | alles gemacht |
| <i class = "material-icons custom"> auswerfen </ i> | auswerfen |
| <i class = "material-icons custom"> Ereignis </ i> | Veranstaltung |
| <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"> erkunden </ i> | erkunden |
| <i class = "material-icons custom"> Erweiterung </ i> | Erweiterung |
| <i class = "material-icons custom"> Gesicht </ i> | Gesicht |
| <i class = "material-icons custom"> Favorit </ i> | Lieblings |
| <i class = "material-icons custom"> favor_border </ i> | favor_border |
| <i class = "material-icons custom"> Feedback </ i> | Feedback |
| <i class = "material-icons custom"> find_in_page </ i> | find_in_page |
| <i class = "material-icons custom"> find_replace </ i> | Ersatz finden |
| <i class = "material-icons custom"> flight_land </ i> | Flugland |
| <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> | die App holen |
| <i class = "material-icons custom"> gif </ i> | gif |
| <i class = "material-icons custom"> Klasse </ i> | Klasse |
| <i class = "material-icons custom"> Gruppenarbeit </ i> | Gruppenarbeit |
| <i class = "material-icons custom"> Hilfe </ i> | Hilfe |
| <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"> Verlauf </ i> | Geschichte |
| <i class = "material-icons custom"> home </ i> | Zuhause |
| <i class = "material-icons custom"> hourglass_empty </ i> | Sanduhr_leer |
| <i class = "material-icons custom"> Sanduhr_voll </ i> | Sanduhr_voll |
| <i class = "material-icons custom"> http </ i> | http |
| <i class = "material-icons custom"> https </ i> | https |
| <i class = "material-icons custom"> info </ i> | die Info |
| <i class = "material-icons custom"> info_outline </ i> | info_outline |
| <i class = "material-icons custom"> Eingabe </ i> | Eingang |
| <i class = "material-icons custom"> invert_colors </ i> | invert_colors |
| <i class = "material-icons custom"> label </ i> | Etikette |
| <i class = "material-icons custom"> label_outline </ i> | label_outline |
| <i class = "material-icons custom"> Sprache </ i> | Sprache |
| <i class = "material-icons custom"> starten </ i> | starten |
| <i class = "material-icons custom"> Liste </ i> | Liste |
| <i class = "material-icons custom"> sperren </ i> | sperren |
| <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"> Loyalität </ i> | Loyalität |
| <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> | open_in_browser |
| <i class = "material-icons custom"> open_in_new </ i> | open_in_new |
| <i class = "material-icons custom"> open_with </ i> | öffnen mit |
| <i class = "material-icons custom"> Seitenaufruf </ i> | Seitenansicht |
| <i class = "material-icons custom"> Zahlung </ i> | Zahlung |
| <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> | Bild im Bild |
| <i class = "material-icons custom"> play_for_work </ i> | play_for_work |
| <i class = "material-icons custom"> Polymer </ i> | Polymer |
| <i class = "material-icons custom"> power_settings_new </ i> | power_settings_new |
| <i class = "material-icons custom"> drucken </ i> | |
| <i class = "material-icons custom"> query_builder </ i> | Abfrage Ersteller |
| <i class = "material-icons custom"> question_answer </ i> | Frage Antwort |
| <i class = "material-icons custom"> Quittung </ i> | Kassenbon |
| <i class = "material-icons custom"> einlösen </ i> | einlösen |
| <i class = "material-icons custom"> neu anordnen </ i> | nachbestellen |
| <i class = "material-icons custom"> report_problem </ i> | Problem melden |
| <i class = "material-icons custom"> wiederherstellen </ i> | wiederherstellen |
| <i class = "material-icons custom"> Raum </ i> | Zimmer |
| <i class = "material-icons custom"> Zeitplan </ i> | Zeitplan |
| <i class = "material-icons custom"> Suche </ i> | Suche |
| <i class = "material-icons custom"> Einstellungen </ i> | die Einstellungen |
| <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"> einkaufen </ i> | Geschäft |
| <i class = "material-icons custom"> shop_two </ i> | shop_two |
| <i class = "material-icons custom"> einkaufskorb </ i> | Einkaufskorb |
| <i class = "material-icons custom"> einkaufskart </ i> | Einkaufswagen |
| <i class = "material-icons custom"> Speaker_notes </ i> | Speaker_Notes |
| <i class = "material-icons custom"> Rechtschreibprüfung </ i> | Rechtschreibprüfung |
| <i class = "material-icons custom"> star_rate </ i> | star_rate |
| <i class = "material-icons custom"> Sterne </ i> | Sterne |
| <i class = "material-icons custom"> speichern </ i> | Geschäft |
| <i class = "material-icons custom"> Betreff </ i> | Gegenstand |
| <i class = "material-icons custom"> Supervisor-Konto </ i> | Supervisor-Konto |
| <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 |
| Registerkarte <i class = "material-icons custom"> </ i> | Tab |
| <i class = "material-icons custom"> tab_unselected </ i> | tab_unselected |
| <i class = "material-icons custom"> Theater </ i> | Theater |
| <i class = "material-icons custom"> thumb_down </ i> | Daumen runter |
| <i class = "material-icons custom"> thumb_up </ i> | Daumen hoch |
| <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"> heute </ i> | heute |
| <i class = "material-icons custom"> Maut </ i> | Maut |
| <i class = "material-icons custom"> track_changes </ i> | Änderungen verfolgen |
| <i class = "material-icons custom"> übersetzen </ i> | Übersetzen |
| <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"> drehte sich um </ i> | drehte sich um |
| <i class = "material-icons custom"> verifizierter_Benutzer </ 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"> Sichtbarkeit </ i> | Sichtweite |
| <i class = "material-icons custom"> sichtbarkeit_off </ i> | sichtbarkeit_off |
| <i class = "material-icons custom"> funktioniert </ i> | Arbeit |
| <i class = "material-icons custom"> youtube_searched_for </ i> | youtube_searched_for |
| <i class = "material-icons custom"> zoom_in </ i> | hineinzoomen |
| <i class = "material-icons custom"> zoom_out </ i> | Rauszoomen |