Ícones básicos
Para usar os ícones do Google, adicione a seguinte linha dentro do <head> da sua página HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Nota: Não precisa fazer download ou instalação é necessária!
Adicione o material-icons classe a um elemento inline e inserir o nome do ícone:
Exemplo
O código a seguir:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons"
style="font-size:48px;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Resulta em:
cloud
cloud
cloud Tente você mesmo " ícones do Google são projetados para ser usado com elementos em linha. A <i> e <span> elementos são amplamente utilizados para ícones.
Nota: Os ícones de material são 24px por padrão.
Observe também que se você mudar a cor do recipiente do ícone, a cor do ícone muda também. Mesmas coisas vai para sombra, e qualquer outra coisa que fica herdada usando CSS. A exceção é a propriedade CSS font-size, que é sempre 24px, a menos que outra coisa seja especificada.
Ícones consideráveis
Embora os ícones de material pode ser redimensionada em qualquer tamanho, o tamanho da fonte recomendada é ou 18, 24, 36 ou 48px:
Exemplo
O código a seguir:
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size:
18px; }
.material-icons.md-24 { font-size:
24px; } /* Default */
.material-icons.md-36 { font-size:
36px; }
.material-icons.md-48 { font-size:
48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons
md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons
md-48">cloud</i>Resulta em:
cloud
cloud
cloud
cloud
Tente você mesmo "