Material - Ícones de Hardware

Este capítulo explica o uso dos ícones de hardware (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 hardware (material) do Google. Substitua a tag <body> do programa acima pelo código fornecido na tabela para obter os respectivos resultados -

Uso	Resultado
<i class = "material-icons custom"> elenco </i>	fundida
<i class = "material-icons custom"> cast_connected </i>	cast_connected
<i class = "material-icons custom"> computador </i>	computador
<i class = "material-icons custom"> desktop_mac </i>	desktop_mac
<i class = "material-icons custom"> desktop_windows </i>	desktop_windows
<i class = "material-icons custom"> developer_board </i>	developer_board
<i class = "material-icons custom"> device_hub </i>	device_hub
<i class = "material-icons custom"> dock </i>	doca
<i class = "material-icons custom"> gamepad </i>	controle
<i class = "material-icons custom"> fone de ouvido </i>	fone de ouvido
<i class = "material-icons custom"> headset_mic </i>	headset_mic
<i class = "material-icons custom"> teclado </i>	teclado
<i class = "material-icons custom"> keyboard_arrow_down </i>	keyboard_arrow_down
<i class = "material-icons custom"> keyboard_arrow_left </i>	keyboard_arrow_left
<i class = "material-icons custom"> keyboard_arrow_right </i>	keyboard_arrow_right
<i class = "material-icons custom"> keyboard_arrow_up </i>	keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </i>	keyboard_backspace
<i class = "material-icons custom"> keyboard_capslock </i>	keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </i>	keyboard_hide
<i class = "material-icons custom"> retorno do teclado </i>	teclado_retorno
<i class = "material-icons custom"> keyboard_tab </i>	keyboard_tab
<i class = "material-icons custom"> teclado_voice </i>	teclado_voice
<i class = "material-icons custom"> laptop </i>	computador portátil
<i class = "material-icons custom"> laptop_chromebook </i>	laptop_chromebook
<i class = "material-icons custom"> laptop_mac </i>	laptop_mac
<i class = "material-icons custom"> laptop_windows </i>	laptop_windows
<i class = "material-icons custom"> memória </i>	memória
<i class = "material-icons custom"> mouse </i>	rato
<i class = "material-icons custom"> phone_android </i>	phone_android
<i class = "material-icons custom"> phone_iphone </i>	phone_iphone
<i class = "material-icons custom"> link telefônico </i>	ligação telefônica
<i class = "material-icons custom"> phonelink_off </i>	phonelink_off
<i class = "material-icons custom"> power_input </i>	entrada de energia
<i class = "material-icons custom"> roteador </i>	roteador
<i class = "material-icons custom"> scanner </i>	scanner
<i class = "material-icons custom"> segurança </i>	segurança
<i class = "material-icons custom"> sim_card </i>	cartão SIM
<i class = "material-icons custom"> smartphone </i>	Smartphone
<i class = "material-icons custom"> alto-falante </i>	alto falante
<i class = "material-icons custom"> grupo de alto-falantes </i>	speaker_group
<i class = "material-icons custom"> tablet </i>	tábua
<i class = "material-icons custom"> tablet_android </i>	tablet_android
<i class = "material-icons custom"> tablet_mac </i>	tablet_mac
<i class = "material-icons custom"> brinquedos </i>	brinquedos
<i class = "material-icons custom"> tv </i>	televisão
<i class = "material-icons custom"> relógio </i>	Assistir