Material - Ícones do Editor

Este capítulo explica o uso dos ícones do Google (Material) Editor. Assuma issocustom é o nome da classe CSS onde definimos o tamanho e a cor, conforme mostrado no exemplo abaixo.

<!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>

A tabela a seguir contém o uso e os resultados dos ícones do Google (Material) Editor. Substitua a tag <body> do programa acima com o código fornecido na tabela para obter os respectivos resultados -

Uso Resultado
<i class = "material-icons custom"> attach_file </i> attach_file
<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> Cor da borda
<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 borda
<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 custom"> format_bold </i> format_bold
<i class = "material-icons custom"> 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 custom"> 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"> format_size </i> format_size
<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"> funções </i> funções
<i class = "material-icons custom"> insert_chart </i> insert_chart
<i class = "material-icons custom"> inserir comentário </i> insert_comment
<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 custom"> inserir link </i> insert_link
<i class = "material-icons custom"> inserir foto </i> inserir 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 de espaço </i> barra de espaço
<i class = "material-icons custom"> tachado </i> tachado_s
<i class = "material-icons custom"> vertical_align_bottom </i> vertical_align_bottom
<i class = "material-icons custom"> 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