Material - Iconos de acción
Este capítulo explica el uso de los iconos de acción (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 acción (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"> 3d_rotation </i> | 3d_rotation |
| <i class = "material-icons custom"> accesibilidad </i> | accesibilidad |
| <i class = "material-icons custom"> balance_cuenta </i> | saldo de la cuenta |
| <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"> alarma </i> | alarma |
| <i class = "material-icons custom"> alarm_add </i> | alarm_add |
| <i class = "material-icons custom"> alarm_off </i> | alarma apagada |
| <i class = "material-icons custom"> alarm_on </i> | alarm_on |
| <i class = "material-icons custom"> android </i> | androide |
| <i class = "material-icons custom"> anuncio </i> | anuncio |
| <i class = "material-icons custom"> relación_de_ aspecto </i> | relación_de_aspecto |
| <i class = "material-icons custom"> evaluación </i> | evaluación |
| <i class = "material-icons custom"> asignación </i> | asignación |
| <i class = "material-icons custom"> asignación_ind </i> | asignación_ind |
| <i class = "material-icons custom"> asignación_late </i> | asignación_late |
| <i class = "material-icons custom"> devolución_asignación </i> | asignación_devolución |
| <i class = "material-icons custom"> asignación_ devuelta </i> | asignación_devuelta |
| <i class = "material-icons custom"> asignación_vuelta_en </i> | asignación_convertida_en |
| <i class = "material-icons custom"> autorenew </i> | auto renovación |
| <i class = "material-icons custom"> copia de seguridad </i> | apoyo |
| <i class = "material-icons custom"> libro </i> | libro |
| <i class = "material-icons custom"> marcador </i> | marcador |
| <i class = "material-icons custom"> bookmark_border </i> | bookmark_border |
| <i class = "material-icons custom"> bug_report </i> | informe de error |
| <i class = "material-icons custom"> compilar </i> | construir |
| <i class = "material-icons custom"> almacenado en caché </i> | en caché |
| <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> | cambia la historia |
| <i class = "material-icons personalizado"> check_circle </i> | check_circle |
| <i class = "material-icons personalizado"> chrome_reader_mode </i> | chrome_reader_mode |
| <i class = "material-icons custom"> clase </i> | clase |
| <i class = "material-icons personalizado"> código </i> | código |
| <i class = "material-icons custom"> tarjeta de crédito </i> | tarjeta de crédito |
| <i class = "material-icons custom"> panel </i> | tablero |
| <i class = "material-icons custom"> eliminar </i> | Eliminar |
| <i class = "material-icons custom"> descripción </i> | descripción |
| <i class = "material-icons custom"> dns </i> | dns |
| <i class = "material-icons custom"> hecho </i> | hecho |
| <i class = "material-icons custom"> done_all </i> | done_all |
| <i class = "material-icons custom"> expulsar </i> | expulsar |
| <i class = "material-icons custom"> evento </i> | evento |
| <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"> explorar </i> | explorar |
| <i class = "material-icons custom"> extensión </i> | extensión |
| <i class = "material-icons custom"> rostro </i> | cara |
| <i class = "material-icons custom"> favorito </i> | favorito |
| <i class = "material-icons custom"> favorite_border </i> | favorite_border |
| <i class = "material-icons custom"> comentarios </i> | retroalimentación |
| <i class = "material-icons custom"> find_in_page </i> | encontrar en la página |
| <i class = "material-icons custom"> find_replace </i> | find_replace |
| <i class = "material-icons custom"> flight_land </i> | vuelo_land |
| <i class = "material-icons custom"> despegue_vuelo </i> | vuelo_despegue |
| <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> | Obtener aplicaciones |
| <i class = "material-icons personalizado"> gif </i> | gif |
| <i class = "material-icons custom"> grado </i> | grado |
| <i class = "material-icons custom"> trabajo en grupo </i> | trabajo en equipo |
| <i class = "material-icons custom"> ayuda </i> | ayuda |
| <i class = "material-icons custom"> help_outline </i> | help_outline |
| <i class = "material-icons custom"> resaltar_off </i> | highlight_off |
| <i class = "material-icons custom"> historial </i> | historia |
| <i class = "material-icons custom"> inicio </i> | casa |
| <i class = "material-icons custom"> hourglass_empty </i> | hourglass_empty |
| <i class = "material-icons custom"> hourglass_full </i> | hourglass_full |
| <i class = "material-icons personalizado"> http </i> | http |
| <i class = "material-icons personalizado"> https </i> | https |
| <i class = "material-icons custom"> información </i> | info |
| <i class = "material-icons custom"> info_outline </i> | info_outline |
| <i class = "material-icons custom"> entrada </i> | entrada |
| <i class = "material-icons custom"> colores_invertidos </i> | Colores invertidos |
| <i class = "material-icons custom"> etiqueta </i> | etiqueta |
| <i class = "material-icons custom"> label_outline </i> | label_outline |
| <i class = "material-icons custom"> idioma </i> | idioma |
| <i class = "material-icons custom"> lanzamiento </i> | lanzamiento |
| <i class = "material-icons custom"> lista </i> | lista |
| <i class = "material-icons custom"> candado </i> | bloquear |
| <i class = "material-icons custom"> lock_open </i> | lock_open |
| <i class = "material-icons personalizado"> lock_outline </i> | lock_outline |
| <i class = "material-icons custom"> lealtad </i> | lealtad |
| <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> | abierta en el navegador |
| <i class = "material-icons custom"> open_in_new </i> | open_in_new |
| <i class = "material-icons custom"> open_with </i> | abrir con |
| <i class = "material-icons custom"> vista de página </i> | vista de pagina |
| <i class = "material-icons custom"> pago </i> | pago |
| <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> | imagen en imagen |
| <i class = "material-icons custom"> play_for_work </i> | jugar_para_trabajo |
| <i class = "material-icons custom"> polímero </i> | polímero |
| <i class = "material-icons custom"> power_settings_new </i> | power_settings_new |
| <i class = "material-icons custom"> imprimir </i> | impresión |
| <i class = "material-icons custom"> query_builder </i> | consultor de construcción |
| <i class = "material-icons custom"> question_answer </i> | pregunta respuesta |
| <i class = "material-icons custom"> recibo </i> | recibo |
| <i class = "material-icons custom"> canjear </i> | redimir |
| <i class = "material-icons custom"> reordenar </i> | reordenar |
| <i class = "material-icons custom"> report_problem </i> | Reportar problema |
| <i class = "material-icons custom"> restaurar </i> | restaurar |
| <i class = "material-icons custom"> habitación </i> | habitación |
| <i class = "material-icons custom"> horario </i> | calendario |
| <i class = "material-icons custom"> buscar </i> | buscar |
| <i class = "material-icons custom"> configuración </i> | ajustes |
| <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"> celda_configuración </i> | celda_configuración |
| <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"> comprar </i> | tienda |
| <i class = "material-icons custom"> shop_two </i> | shop_two |
| <i class = "material-icons custom"> cesta_compra </i> | cesta de la compra |
| <i class = "material-icons custom"> shopping_cart </i> | carrito de compras |
| <i class = "material-icons custom"> oradores_notas </i> | orador_notes |
| <i class = "material-icons custom"> revisión ortográfica </i> | corrector ortográfico |
| <i class = "material-icons custom"> star_rate </i> | star_rate |
| <i class = "material-icons custom"> estrellas </i> | estrellas |
| <i class = "material-icons custom"> tienda </i> | Tienda |
| <i class = "material-icons custom"> tema </i> | tema |
| <i class = "material-icons custom"> cuenta_supervisor </i> | cuenta_supervisor |
| <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 |
| pestaña <i class = "material-icons personalizado"> </i> | lengüeta |
| <i class = "material-icons custom"> tab_unselected </i> | tab_unselected |
| <i class = "material-icons custom"> teatros </i> | teatros |
| <i class = "material-icons custom"> thumb_down </i> | pulgar hacia abajo |
| <i class = "material-icons custom"> thumb_up </i> | pulgar arriba |
| <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"> hoy </i> | hoy |
| <i class = "material-icons custom"> peaje </i> | Peaje |
| <i class = "material-icons custom"> track_changes </i> | cambio de camino |
| <i class = "material-icons custom"> traducir </i> | traducir |
| <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"> convertido en </i> | convertido en |
| <i class = "material-icons custom"> usuario_verificado </i> | usuario_verificado |
| <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> | ver lista |
| <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"> visibilidad </i> | visibilidad |
| <i class = "material-icons custom"> visibilidad_off </i> | visibilidad_apagada |
| <i class = "material-icons custom"> trabajo </i> | trabajo |
| <i class = "material-icons custom"> youtube_searched_for </i> | youtube_searched_for |
| <i class = "material-icons personalizado"> zoom_in </i> | acercarse |
| <i class = "material-icons custom"> zoom_out </i> | disminuir el zoom |