Matériel - Icônes d'action
Ce chapitre explique l'utilisation des icônes d'action (Material) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.
<!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>Le tableau suivant contient l'utilisation et les résultats des icônes d'action (Material) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -
| Usage | Résultat |
|---|---|
| <i class = "material-icons custom"> 3d_rotation </i> | 3d_rotation |
| <i class = "material-icons custom"> accessibilité </i> | accessibilité |
| <i class = "material-icons custom"> account_balance </i> | account_balance |
| <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"> alarme </i> | alarme |
| <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"> annonce </i> | annonce |
| <i class = "material-icons custom"> rapport_aspect </i> | ratio d'aspect |
| <i class = "material-icons custom"> évaluation </i> | évaluation |
| <i class = "material-icons custom"> affectation </i> | affectation |
| <i class = "material-icons custom"> assignment_ind </i> | affectation_ind |
| <i class = "material-icons custom"> assignment_late </i> | affectation_late |
| <i class = "material-icons custom"> retour_affectation </i> | devoir_retour |
| <i class = "material-icons custom"> assignment_returned </i> | devoir_retourné |
| <i class = "material-icons custom"> assignment_turned_in </i> | affectation_tournée_in |
| <i class = "material-icons custom"> renouvellement automatique </i> | renouvellement automatique |
| <i class = "material-icons custom"> sauvegarde </i> | sauvegarde |
| <i class = "material-icons custom"> livre </i> | livre |
| <i class = "material-icons custom"> signet </i> | signet |
| <i class = "material-icons custom"> bookmark_border </i> | bookmark_border |
| <i class = "material-icons custom"> rapport de bug </i> | rapport d'erreur |
| <i class = "material-icons custom"> construction </i> | construire |
| <i class = "material-icons custom"> mis en cache </i> | mis en 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> | change_history |
| <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"> classe </i> | classe |
| <i class = "material-icons custom"> code </i> | code |
| <i class = "material-icons custom"> carte de crédit </i> | carte de crédit |
| <i class = "material-icons custom"> tableau de bord </i> | tableau de bord |
| <i class = "material-icons custom"> supprimer </i> | effacer |
| <i class = "material-icons custom"> description </i> | la description |
| <i class = "material-icons custom"> dns </i> | DNS |
| <i class = "material-icons custom"> terminé </i> | terminé |
| <i class = "material-icons custom"> done_all </i> | tout fait |
| <i class = "material-icons custom"> éjecter </i> | éjecter |
| <i class = "material-icons custom"> événement </i> | un événement |
| <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"> explorer </i> | explorer |
| <i class = "material-icons custom"> extension </i> | extension |
| <i class = "material-icons custom"> face </i> | visage |
| <i class = "material-icons custom"> favori </i> | favori |
| <i class = "material-icons custom"> favorite_border </i> | favorite_border |
| <i class = "material-icons custom"> commentaires </i> | retour d'information |
| <i class = "material-icons custom"> find_in_page </i> | find_in_page |
| <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> | obtenir l'application |
| <i class = "material-icons custom"> gif </i> | gif |
| <i class = "material-icons custom"> grade </i> | classe |
| <i class = "material-icons custom"> group_work </i> | travail de groupe |
| <i class = "material-icons custom"> aide </i> | Aidez-moi |
| <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"> historique </i> | l'histoire |
| <i class = "material-icons custom"> accueil </i> | domicile |
| <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"> informations </i> | Info |
| <i class = "material-icons custom"> info_outline </i> | info_outline |
| <i class = "material-icons custom"> entrée </i> | contribution |
| <i class = "material-icons custom"> invert_colors </i> | Inverser les couleurs |
| <i class = "material-icons custom"> étiquette </i> | étiquette |
| <i class = "material-icons custom"> label_outline </i> | label_outline |
| <i class = "material-icons custom"> langue </i> | Langue |
| <i class = "material-icons custom"> lancement </i> | lancement |
| <i class = "material-icons custom"> liste </i> | liste |
| <i class = "material-icons custom"> verrou </i> | fermer à clé |
| <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"> fidélité </i> | fidélité |
| <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> | ouvrir avec |
| <i class = "material-icons custom"> page vue </i> | page vue |
| <i class = "material-icons custom"> paiement </i> | Paiement |
| <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> | image dans l'image |
| <i class = "material-icons custom"> play_for_work </i> | play_for_work |
| <i class = "material-icons custom"> polymère </i> | polymère |
| <i class = "material-icons custom"> power_settings_new </i> | power_settings_new |
| <i class = "material-icons custom"> imprimer </i> | impression |
| <i class = "material-icons custom"> query_builder </i> | query_builder |
| <i class = "material-icons custom"> question_answer </i> | Question Réponse |
| <i class = "material-icons custom"> reçu </i> | le reçu |
| <i class = "material-icons custom"> utiliser </i> | racheter |
| <i class = "material-icons custom"> réorganiser </i> | réorganiser |
| <i class = "material-icons custom"> report_problem </i> | signaler un problème |
| <i class = "material-icons custom"> restaurer </i> | restaurer |
| <i class = "material-icons custom"> salle </i> | pièce |
| <i class = "material-icons custom"> calendrier </i> | programme |
| <i class = "material-icons custom"> recherche </i> | chercher |
| <i class = "material-icons custom"> paramètres </i> | réglages |
| <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"> boutique </i> | magasin |
| <i class = "material-icons custom"> shop_two </i> | shop_two |
| <i class = "material-icons custom"> panier_achats </i> | panier |
| <i class = "material-icons custom"> panier_achat </i> | Panier |
| <i class = "material-icons custom"> speaker_notes </i> | notes_orateur |
| <i class = "material-icons custom"> vérification orthographique </i> | vérification orthographique |
| <i class = "material-icons custom"> star_rate </i> | star_rate |
| <i class = "material-icons custom"> étoiles </i> | étoiles |
| <i class = "material-icons custom"> magasin </i> | boutique |
| <i class = "material-icons custom"> sujet </i> | matière |
| <i class = "material-icons custom"> supervisor_account </i> | superviseur_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"> onglet </i> | languette |
| <i class = "material-icons custom"> tab_unselected </i> | tab_unselected |
| <i class = "material-icons custom"> cinémas </i> | théâtres |
| <i class = "material-icons custom"> thumb_down </i> | thumb_down |
| <i class = "material-icons custom"> thumb_up </i> | Pouce en l'air |
| <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"> aujourd'hui </i> | aujourd'hui |
| <i class = "material-icons custom"> péage </i> | péage |
| <i class = "material-icons custom"> track_changes </i> | suivi des modifications |
| <i class = "material-icons custom"> traduire </i> | traduire |
| <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"> tourné dans </i> | tourné en |
| <i class = "material-icons custom"> Verified_user </i> | vérifié_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"> liste_vue </i> | Afficher la liste |
| <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"> visibilité </i> | visibilité |
| <i class = "material-icons custom"> visibilité_off </i> | visibilité_off |
| <i class = "material-icons custom"> travail </i> | travail |
| <i class = "material-icons custom"> youtube_searched_for </i> | youtube_searched_for |
| <i class = "material-icons custom"> zoom_in </i> | agrandir |
| <i class = "material-icons custom"> zoom_out </i> | Dézoomer |