Atualização de 2019 aqui:
Para hospedar seus ícones de materiais, os regulares, arredondados, afiados, todas as variantes. Vá buscá-los neste repositório:
https://github.com/petergng/material-icon-font
Por algum motivo, não sei por que essas fontes não são facilmente acessíveis nos repositórios do Google.
Mas aqui está.
Depois de baixar o pacote, vá para a pasta bin e você verá as quatro variantes. Claro, cabe a você usar qualquer um deles.
Para usá-los, crie um arquivo css e
- Gere uma fonte para cada variante necessária:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
src: local('Material-Icons-Regular'),
url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
src: local('Material-Icons-Round'),
url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
url(./icons/round/Material-Icons-Round.woff) format('woff'),
url(./icons/round/Material-Icons-Round.svg) format('svg'),
url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
src: local('Material-Icons-Sharp'),
url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}
O urllink para onde os ícones estão localizados em seu projeto.
- Agora vamos registrar as classes de ícones:
.material-icons-outlined, .material-icons {
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Isso fará com que ambas as
classes .material-icons-outlined,
e
.material-iconsusem os mesmos padrões. Se você quiser usar .material-icons-sharp, basta anexar aos nomes das duas classes.
- Por fim, vamos inserir a face da fonte que você obteve na etapa 1.
.material-icons {
font-family: 'Material Icons';
}
.material-icons-outlined {
font-family: 'Material Icons Outline';
}
Novamente, para usar mais variantes, como Sharp, basta adicionar seu bloco como os dois acima.
Uma vez feito ... vá para o seu html e use os ícones recém-criados.
<i class="material-icons-outlined">hourglass_empty</i>
<i class="material-icons">phone</i>
