Material - Iconos del editor

Este capítulo explica el uso de los íconos del Editor (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 íconos del Editor (de materiales) 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"> adjuntar_archivo </i> Adjuntar archivo
<i class = "material-icons custom"> attach_money </i> attach_money
<i class = "material-icons custom"> border_all </i> border_all
<i class = "material-icons custom"> border_bottom </i> border_bottom
<i class = "material-icons custom"> border_clear </i> border_clear
<i class = "material-icons custom"> border_color </i> color del borde
<i class = "material-icons custom"> border_horizontal </i> border_horizontal
<i class = "material-icons custom"> border_inner </i> border_inner
<i class = "material-icons custom"> border_left </i> border_left
<i class = "material-icons custom"> border_outer </i> border_outer
<i class = "material-icons custom"> border_right </i> border_right
<i class = "material-icons custom"> border_style </i> estilo de borde
<i class = "material-icons custom"> border_top </i> border_top
<i class = "material-icons custom"> border_vertical </i> border_vertical
<i class = "material-icons custom"> format_align_center </i> format_align_center
<i class = "material-icons custom"> format_align_justify </i> format_align_justify
<i class = "material-icons custom"> format_align_left </i> format_align_left
<i class = "material-icons custom"> format_align_right </i> format_align_right
<i class = "material-icons personalizado"> format_bold </i> format_bold
<i class = "material-icons personalizado"> format_clear </i> format_clear
<i class = "material-icons custom"> format_color_fill </i> format_color_fill
<i class = "material-icons custom"> format_color_reset </i> format_color_reset
<i class = "material-icons custom"> format_color_text </i> format_color_text
<i class = "material-icons custom"> format_indent_decrease </i> format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </i> format_indent_increase
<i class = "material-icons personalizado"> format_italic </i> format_italic
<i class = "material-icons custom"> format_line_spacing </i> format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </i> format_list_bulleted
<i class = "material-icons custom"> format_list_numbered </i> format_list_numbered
<i class = "material-icons custom"> format_paint </i> format_paint
<i class = "material-icons custom"> format_quote </i> format_quote
<i class = "material-icons custom"> formato_tamaño </i> formato_tamaño
<i class = "material-icons custom"> format_strikethrough </i> format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </i> format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </i> format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </i> format_underline
<i class = "material-icons custom"> funciones </i> funciones
<i class = "material-icons custom"> insert_chart </i> insert_chart
<i class = "material-icons custom"> insert_comment </i> Insertar comentario
<i class = "material-icons custom"> insert_drive_file </i> insert_drive_file
<i class = "material-icons custom"> insert_emoticon </i> insert_emoticon
<i class = "material-icons custom"> insert_invitation </i> insert_invitation
<i class = "material-icons personalizado"> insert_link </i> Insertar el link
<i class = "material-icons custom"> insert_photo </i> insertar_foto
<i class = "material-icons custom"> merge_type </i> merge_type
<i class = "material-icons custom"> mode_comment </i> mode_comment
<i class = "material-icons custom"> mode_edit </i> mode_edit
<i class = "material-icons custom"> money_off </i> money_off
<i class = "material-icons custom"> publicar </i> publicar
<i class = "material-icons custom"> barra_espaciadora </i> barra espaciadora
<i class = "material-icons custom"> tachado_s </i> tachado_s
<i class = "material-icons custom"> vertical_align_bottom </i> vertical_align_bottom
<i class = "material-icons personalizado"> vertical_align_center </i> vertical_align_center
<i class = "material-icons custom"> vertical_align_top </i> vertical_align_top
<i class = "material-icons custom"> wrap_text </i> wrap_text