Matériel - Icônes de notification

Ce chapitre explique l'utilisation des icônes de notification (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 de notification (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"> adb </i> adb
<i class = "material-icons custom"> airlines_seat_flat </i> aerienne_seat_flat
<i class = "material-icons custom"> airlines_seat_flat_angled </i> compagnie aérienne_seat_flat_angled
<i class = "material-icons custom"> compagnie aérienne_seat_individual_suite </i> air_seat_individual_suite
<i class = "material-icons custom"> compagnie aérienne_seat_legroom_reduced </i> compagnie aérienne_seat_legroom_reduced
<i class = "material-icons custom"> compagnie aérienne_seat_recline_extra </i> Airlines_seat_recline_extra
<i class = "material-icons custom"> compagnie aérienne_seat_recline_normal </i> compagnie aérienne_seat_recline_normal
<i class = "material-icons custom"> bluetooth_audio </i> bluetooth_audio
<i class = "material-icons custom"> numéro de confirmation </i> numéro de confirmation
<i class = "material-icons custom"> disc_full </i> disc_full
<i class = "material-icons custom"> do_not_disturb </i> ne pas déranger
<i class = "material-icons custom"> do_not_disturb_alt </i> do_not_disturb_alt
<i class = "material-icons custom"> lecteur_eta </i> drive_eta
<i class = "material-icons custom"> event_available </i> event_available
<i class = "material-icons custom"> event_busy </i> event_busy
<i class = "material-icons custom"> event_note </i> event_note
<i class = "material-icons custom"> folder_special </i> folder_special
<i class = "material-icons custom"> live_tv </i> en direct
<i class = "material-icons custom"> mms </i> mms
<i class = "material-icons custom"> plus </i> plus
<i class = "material-icons custom"> network_locked </i> network_locked
<i class = "material-icons custom"> ondemand_video </i> ondemand_video
<i class = "material-icons custom"> personal_video </i> personal_video
<i class = "material-icons custom"> phone_bluetooth_speaker </i> phone_bluetooth_speaker
<i class = "material-icons custom"> phone_forwarded </i> phone_forwarded
<i class = "material-icons custom"> phone_in_talk </i> phone_in_talk
<i class = "material-icons custom"> phone_locked </i> phone_locked
<i class = "material-icons custom"> phone_missed </i> phone_missed
<i class = "material-icons custom"> phone_paused </i> phone_paused
<i class = "material-icons custom"> puissance </i> Puissance
<i class = "material-icons custom"> sd_card </i> carte SD
<i class = "material-icons custom"> sim_card_alert </i> sim_card_alert
<i class = "material-icons custom"> sms </i> SMS
<i class = "material-icons custom"> sms_failed </i> sms_failed
<i class = "material-icons custom"> sync </i> synchroniser
<i class = "material-icons custom"> sync_disabled </i> sync_disabled
<i class = "material-icons custom"> sync_problem </i> sync_problem
<i class = "material-icons custom"> system_update </i> mise à jour du système
<i class = "material-icons custom"> tap_and_play </i> tap_and_play
<i class = "material-icons custom"> time_to_leave </i> il est l'heure de partir
<i class = "material-icons custom"> vibration </i> vibration
<i class = "material-icons custom"> voice_chat </i> chat vocal
<i class = "material-icons custom"> vpn_lock </i> vpn_lock
<i class = "material-icons custom"> wc </i> toilettes
<i class = "material-icons custom"> wifi </i> Wifi