Material - Ícones de conteúdo

Este capítulo explica o uso dos ícones de conteúdo (material) do Google. 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 de conteúdo (material) do Google. 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"> adicionar </i> adicionar
<i class = "material-icons custom"> add_box </i> add_box
<i class = "material-icons custom"> add_circle </i> add_circle
<i class = "material-icons custom"> add_circle_outline </i> add_circle_outline
<i class = "material-icons custom"> arquivo </i> arquivo
<i class = "material-icons custom"> backspace </i> backspace
<i class = "material-icons custom"> bloquear </i> quadra
<i class = "material-icons custom"> claro </i> Claro
<i class = "material-icons custom"> content_copy </i> content_copy
<i class = "material-icons custom"> content_cut </i> content_cut
<i class = "material-icons custom"> content_paste </i> content_paste
<i class = "material-icons custom"> criar </i> crio
<i class = "material-icons custom"> rascunhos </i> rascunhos
<i class = "material-icons custom"> filter_list </i> filter_list
<i class = "material-icons custom"> sinalizador </i> bandeira
<i class = "material-icons custom"> font_download </i> font_download
<i class = "material-icons custom"> encaminhar </i> frente
<i class = "material-icons custom"> gesto </i> gesto
<i class = "material-icons custom"> caixa de entrada </i> caixa de entrada
<i class = "material-icons custom"> link </i> ligação
<i class = "material-icons custom"> correio </i> enviar
<i class = "material-icons custom"> marcar não lido </i> marcar não lido
<i class = "material-icons custom"> refazer </i> refazer
<i class = "material-icons custom"> remover </i> retirar
<i class = "material-icons custom"> remove_circle </i> remove_circle
<i class = "material-icons custom"> remove_circle_outline </i> remove_circle_outline
<i class = "material-icons custom"> resposta </i> resposta
<i class = "material-icons custom"> reply_all </i> responder todos
<i class = "material-icons custom"> relatório </i> relatório
<i class = "material-icons custom"> salvar </i> Salve 
<i class = "material-icons custom"> select_all </i> selecionar tudo
<i class = "material-icons custom"> enviar </i> enviar
<i class = "material-icons custom"> classificar </i> ordenar
<i class = "material-icons custom"> text_format </i> text_format
<i class = "material-icons custom"> stay_current_portrait </i> stay_current_portrait
<i class = "material-icons custom"> desfazer </i> desfazer