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