Materiale - Icone hardware
Questo capitolo spiega l'utilizzo delle icone dell'hardware (materiale) di Google. Assumilocustom è il nome della classe CSS in cui abbiamo definito la dimensione e il colore, come mostrato nell'esempio riportato di seguito.
<!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>La tabella seguente contiene l'utilizzo e i risultati delle icone dell'hardware (materiale) di Google. Sostituisci il tag <body> del programma precedente con il codice fornito nella tabella per ottenere i rispettivi output -
| Utilizzo | Risultato |
|---|---|
| <i class = "material-icons custom"> cast </i> | cast |
| <i class = "material-icons custom"> cast_connected </i> | cast_connected |
| <i class = "material-icons custom"> computer </i> | computer |
| <i class = "material-icons custom"> desktop_mac </i> | desktop_mac |
| <i class = "material-icons custom"> desktop_windows </i> | desktop_windows |
| <i class = "material-icons custom"> developer_board </i> | developer_board |
| <i class = "material-icons custom"> device_hub </i> | device_hub |
| <i class = "material-icons custom"> dock </i> | dock |
| <i class = "material-icons custom"> gamepad </i> | gamepad |
| <i class = "material-icons custom"> auricolare </i> | auricolare |
| <i class = "material-icons custom"> headset_mic </i> | headset_mic |
| <i class = "material-icons custom"> tastiera </i> | tastiera |
| <i class = "material-icons custom"> keyboard_arrow_down </i> | keyboard_arrow_down |
| <i class = "material-icons custom"> keyboard_arrow_left </i> | keyboard_arrow_left |
| <i class = "material-icons custom"> keyboard_arrow_right </i> | keyboard_arrow_right |
| <i class = "material-icons custom"> keyboard_arrow_up </i> | keyboard_arrow_up |
| <i class = "material-icons custom"> keyboard_backspace </i> | keyboard_backspace |
| <i class = "material-icons custom"> keyboard_capslock </i> | keyboard_capslock |
| <i class = "material-icons custom"> keyboard_hide </i> | keyboard_hide |
| <i class = "material-icons custom"> keyboard_return </i> | keyboard_return |
| <i class = "material-icons custom"> keyboard_tab </i> | keyboard_tab |
| <i class = "material-icons custom"> keyboard_voice </i> | keyboard_voice |
| <i class = "material-icons custom"> laptop </i> | il computer portatile |
| <i class = "material-icons custom"> laptop_chromebook </i> | laptop_chromebook |
| <i class = "material-icons custom"> laptop_mac </i> | laptop_mac |
| <i class = "material-icons custom"> laptop_windows </i> | laptop_windows |
| <i class = "material-icons custom"> memoria </i> | memoria |
| <i class = "material-icons custom"> mouse </i> | topo |
| <i class = "material-icons custom"> phone_android </i> | phone_android |
| <i class = "material-icons custom"> phone_iphone </i> | phone_iphone |
| <i class = "material-icons custom"> phonelink </i> | phonelink |
| <i class = "material-icons custom"> phonelink_off </i> | phonelink_off |
| <i class = "material-icons custom"> power_input </i> | Ingresso alimentazione |
| <i class = "material-icons custom"> router </i> | router |
| <i class = "material-icons custom"> scanner </i> | scanner |
| <i class = "material-icons custom"> sicurezza </i> | sicurezza |
| <i class = "material-icons custom"> sim_card </i> | carta SIM |
| <i class = "material-icons custom"> smartphone </i> | smartphone |
| <i class = "material-icons custom"> altoparlante </i> | altoparlante |
| <i class = "material-icons custom"> speaker_group </i> | speaker_group |
| <i class = "material-icons custom"> tablet </i> | tavoletta |
| <i class = "material-icons custom"> tablet_android </i> | tablet_android |
| <i class = "material-icons custom"> tablet_mac </i> | tablet_mac |
| <i class = "material-icons custom"> giocattoli </i> | giocattoli |
| <i class = "material-icons custom"> tv </i> | tv |
| <i class = "material-icons custom"> guarda </i> | orologio |