Material - Iconos de hardware
Este capítulo explica el uso de los iconos de hardware (Material) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.
<!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 siguiente tabla contiene el uso y los resultados de los iconos de hardware (Material) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -
Uso | Resultado |
---|---|
<i class = "material-icons custom"> emitir </i> | emitir |
<i class = "material-icons custom"> cast_connected </i> | cast_connected |
<i class = "material-icons custom"> computadora </i> | computadora |
<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"> muelle </i> | muelle |
<i class = "material-icons custom"> mando </i> | mando |
<i class = "material-icons custom"> auriculares </i> | auriculares |
<i class = "material-icons custom"> auricular_mic </i> | auricular_mic |
<i class = "material-icons custom"> teclado </i> | teclado |
<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"> computadora portátil </i> | ordenador portátil |
<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> | ratón |
<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"> enlace telefónico </i> | enlace telefónico |
<i class = "material-icons custom"> phonelink_off </i> | phonelink_off |
<i class = "material-icons custom"> power_input </i> | entrada de alimentación |
<i class = "material-icons custom"> enrutador </i> | enrutador |
<i class = "material-icons custom"> escáner </i> | escáner |
<i class = "material-icons custom"> seguridad </i> | seguridad |
<i class = "material-icons custom"> tarjeta_im </i> | tarjeta SIM |
<i class = "material-icons custom"> teléfono inteligente </i> | smartphone |
<i class = "material-icons custom"> altavoz </i> | altavoz |
<i class = "material-icons custom"> grupo_de_parlantes </i> | altavoz_grupo |
<i class = "material-icons custom"> tableta </i> | tableta |
<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"> juguetes </i> | juguetes |
<i class = "material-icons custom"> tv </i> | televisión |
<i class = "material-icons custom"> reloj </i> | reloj |