O Google reformulou seus ícones de design de materiais com 4 novos temas predefinidos:

Delineado, Arredondado, Dois tons e Nítido , além do tema normal de preenchimento / linha de base :

Mas, infelizmente, não diz em nenhum lugar como usar os novos temas.

Eu o uso pelo Google Web Fonts incluindo o link:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

E, em seguida, usando o ícone necessário, conforme sugerido na documentação :

<i class="material-icons">account_balance</i>

Mas sempre mostra a versão 'Preenchida / Linha de base'.

Tentei fazer o seguinte para usar o tema descrito :

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

e, alterando o link Fontes da Web para:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" rel="stylesheet">

etc. Mas não funciona.

E não faz sentido tirar fotos no escuro assim.

tl; dr: Alguém já tentou usar os novos temas? Funciona como a versão de linha de base (tag html embutido)? Ou é apenas para ser baixado nos formatos SVG ou PNG?

Desde já, obrigado.

Atualização (31/03/2019): Todos os temas de ícones funcionam via Google Web Fonts agora.

Como apontado por Edric, é apenas uma questão de adicionar o link das fontes da web do google na cabeça do seu documento agora, da seguinte forma:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

E, em seguida, adicionando a classe correta para gerar o ícone de um tema específico.

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

A cor dos ícones também pode ser alterada usando CSS.

Nota: os ícones do tema em dois tons estão um pouco problemáticos no momento.

Atualização (14/11/2018): lista de 16 ícones de estrutura de tópicos que funcionam com o sufixo "_outline".

Aqui está a lista mais recente dos 16 ícones de estrutura de tópicos que funcionam com os Webfont de ícones de materiais comuns, usando o sufixo _outline (testado e confirmado).

(Conforme encontrado na página do material-design-ícones do github . Procure por: " _outline_24px.svg ")

<i class="material-icons">help_outline</i> 
<i class="material-icons">label_outline</i> 
<i class="material-icons">mail_outline</i> 
<i class="material-icons">info_outline</i> 
<i class="material-icons">lock_outline</i> 
<i class="material-icons">lightbulb_outline</i> 
<i class="material-icons">play_circle_outline</i> 
<i class="material-icons">error_outline</i> 
<i class="material-icons">add_circle_outline</i> 
<i class="material-icons">people_outline</i> 
<i class="material-icons">person_outline</i> 
<i class="material-icons">pause_circle_outline</i> 
<i class="material-icons">chat_bubble_outline</i> 
<i class="material-icons">remove_circle_outline</i> 
<i class="material-icons">check_box_outline_blank</i> 
<i class="material-icons">pie_chart_outlined</i> 

Observe que o pie_chart precisa ser " pie_chart_ delineado " e não delineado .

Este é um truque para testar os novos temas de ícones usando uma tag embutida. Não é a solução oficial.

Até hoje (19 de julho de 2018), pouco mais de 2 meses desde a introdução dos novos temas de ícones, não há como incluir esses ícones usando uma tag embutida <i class="material-icons"></i>.

+ Martin salientou que há uma questão levantada no Github em relação ao mesmo: https://github.com/google/material-design-icons/issues/773

Portanto, até o Google encontrar uma solução para isso, comecei a usar um hack para incluir esses novos temas de ícones no meu ambiente de desenvolvimento antes de baixar os ícones apropriados como SVG ou PNG. E pensei em compartilhar com todos vocês.

IMPORTANTE : não use isso em um ambiente de produção, pois cada um dos arquivos CSS incluídos do Google tem mais de 1 MB.

O Google usa essas folhas de estilo para exibir os ícones na página de demonstração:

Esboço:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Arredondado:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

Dois tons:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

Afiado:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

Cada um desses arquivos contém os ícones dos respectivos temas incluídos como imagens de fundo (dados de imagem Base64). E aqui está como podemos usá-lo para testar a compatibilidade de um ícone específico em nosso design antes de fazer o download para uso no ambiente de produção.

PASSO 1 :

Inclua a folha de estilo do tema que você deseja usar. Por exemplo: para o tema 'Descrito', use a folha de estilo para 'outline.css'

PASSO 2 :

Adicione as seguintes classes à sua própria folha de estilo:

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

PASSO 3 :

Use o ícone adicionando as seguintes classes ao<i> tag:

1) material-icons-newclasse

2) Nome do ícone conforme mostrado na página de demonstração dos ícones do material, prefixado com o nome do tema seguido por um hífen.

Prefixos:

Delineado: outline-

Arredondado: round-

Dois tons: twotone-

Afiado: sharp-

Por exemplo (para o ícone 'anúncio'):

outline-announcement, round-announcement, twotone-announcement,sharp-announcement

3) Use uma 3ª classe opcional icon-whitepara inverter a cor de preto para branco (para fundos escuros)

Alterando o tamanho do ícone:

Como essa é uma imagem de plano de fundo e não um ícone de fonte, use as propriedades heighte widthdo CSS para modificar o tamanho dos ícones. O padrão é definido como 24px na material-icons-newclasse.

Exemplo:

Caso I: para o tema descrito no ícone account_circle :

1) Inclua a folha de estilo:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

2) Adicione a tag icon na sua página:

<i class="material-icons-new outline-account_circle"></i>

Opcional (para fundos escuros):

<i class="material-icons-new outline-account_circle icon-white"></i>

Caso II: Para o Tema Afiado do ícone de avaliação :

1) Inclua a folha de estilo:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

2) Adicione a tag icon na sua página:

<i class="material-icons-new sharp-assessment"></i>

(Para fundos escuros):

<i class="material-icons-new sharp-assessment icon-white"></i>

Não posso enfatizar o suficiente que essa NÃO É A MANEIRA CERTA de incluir os ícones no seu ambiente de produção. Mas se você tiver que digitalizar vários ícones da sua página em desenvolvimento, isso facilita bastante a inclusão de ícones e economiza muito tempo.

Baixar o ícone como SVG ou PNG certamente é uma opção melhor no que diz respeito à otimização da velocidade do site, mas os ícones de fonte economizam tempo na fase de criação de protótipos e verificam se um ícone específico é compatível com o design, etc.

Atualizarei esta postagem se e quando o Google apresentar uma solução para esse problema que não envolva o download de um ícone para uso.

A partir de 27 de fevereiro de 2019, há fontes CSS para os novos temas Ícone de material.

No entanto, você precisa criar classes CSS para usar as fontes.

As famílias de fontes são as seguintes:

• Material Icons Outlined - Ícones delineados
• Material Icons Two Tone - Ícones de dois tons
• Material Icons Round - Ícones arredondados
• Material Icons Sharp - Ícones afiados

Veja o exemplo de código abaixo para um exemplo:

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
}

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

.material-icons-round,
.material-icons.material-icons--round {
  font-family: 'Material Icons Round';
}

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons material-icons--two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons material-icons--round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons material-icons--sharp">assignment</i>
  </section>
</body>

</html>

Ou visualize-o no Codepen

EDIT: A partir de 10 de março de 2019, parece que agora existem classes para os novos ícones de fonte:

body {
  font-family: Roboto, sans-serif;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

EDIT # 2: Aqui está uma solução alternativa para colorir ícones de dois tons usando filtros de imagem CSS (código adaptado deste comentário ):

body {
  font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
  font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
  color: #0099ff;
  font-size: 48px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

Ou visualize-o no Codepen

Para material angular, você deve usar a entrada fontSet para alterar a família de fontes:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...

Se você já possui ícones de materiais trabalhando em seu projeto da web, basta atualizar sua referência no arquivo html e a classe usada para ícones:

referência html:

Antes

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Depois de

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

classe de ícones de materiais:

Depois disso, verifique qual className você está usando:

Antes:

<i className="material-icons">weekend</i>

Depois de:

<i className="material-icons-outlined">weekend</i>

isso funciona para mim ... Pura vida!

O que funcionou para mim é usar _outline e não _outline d após o nome do ícone.

<mat-icon>info</mat-icon>

vs

<mat-icon>info_outline</mat-icon>

A partir de 12/05/2020, você precisará

1. inclua CSS:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

2. Use-o assim:

<i class="material-icons">account_balance</i>
<i class="material-icons material-icons-outlined">account_balance</i>
<i class="material-icons material-icons-two-tone">account_balance</i>
<i class="material-icons material-icons-sharp">account_balance</i>
<i class="material-icons material-icons-round">account_balance</i>

Nota: Por exemplo, para usar o estilo esboçado, Você precisa especificar materiais-ícones E MATERIAL-ícones-delineados classes.

Novos temas provavelmente ainda não fazem parte da fonte Material Icons. Link .

A edição recente do Aj334 funciona perfeitamente.

CDN do google

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Elemento ícone

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

Até o momento, nenhuma das respostas explica como fazer o download das várias variantes dessa fonte para que você possa servi-las em seu próprio site (servidor WWW).

Embora isso possa parecer um problema menor do ponto de vista técnico, é um grande problema do ponto de vista jurídico, pelo menos se você pretende apresentar suas páginas a qualquer cidadão da UE (ou mesmo se você o fizer por acidente). Isso vale mesmo para empresas que residem nos EUA (ou em qualquer país fora da UE).

Se alguém estiver interessado por isso, atualizarei esta resposta e darei mais alguns detalhes aqui, mas, no momento, não quero perder muito espaço fora do tópico.

Tendo dito isto:

Fiz o download de todas as versões (regular, delineada, arredondada, nítida, em dois tons) dessa fonte, seguindo duas etapas muito fáceis (foi a resposta do @ Aj334 à sua própria pergunta que me colocou no caminho certo) (exemplo: " "variante):

1. Obtenha o CSS da CDN do Google, deixando o navegador buscar o URL do CSS diretamente , ou seja, copie o seguinte URL na barra de localização do navegador:

   https://fonts.googleapis.com/css?family=Material+Icons+Outlined
   

   Isso retornará uma página com esta aparência (pelo menos no Firefox 70.0.1 no momento em que escrevemos isso):

   /* fallback */
   @font-face {
     font-family: 'Material Icons Outlined';
     font-style: normal;
     font-weight: 400;
     src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
   }
   
   .material-icons-outlined {
     font-family: 'Material Icons Outlined';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
     display: inline-block;
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;
     -moz-font-feature-settings: 'liga';
     -moz-osx-font-smoothing: grayscale;
   }
   

2. Encontre a linha que começa src:no código acima e deixe seu navegador buscar o URL contido nessa linha , ou seja, copie o seguinte URL na barra de localização do navegador:

   https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
   

   Agora, o navegador fará o download desse .woff2arquivo e oferecerá salvá-lo localmente (pelo menos, o Firefox fez).

Duas considerações finais:

Obviamente, você pode baixar as outras variantes dessa fonte usando o mesmo método. Na primeira etapa, basta substituir a sequência de caracteres Outlinedno URL pelas seqüências de caracteres Round(sim, sério, embora aqui seja chamado de "Arredondado" no menu de navegação esquerdo), Sharpou Two+Tone, respectivamente. A página de resultados será quase a mesma sempre, mas o URL na src:linha do curso é diferente para cada variante.

Por fim, na etapa 1, você ainda pode usar esse URL:

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

Isso retornará o CSS para todas as variantes em uma página, que contém cinco src:linhas, cada uma com outra URL designando onde a fonte correspondente está localizada.

O link de webfonts funciona agora, em todos os navegadores!

Basta adicionar seus temas ao link da fonte, separado por um pipe ( |), como este

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

Em seguida, faça referência à classe, assim:

// class="material-icons" or class="material-icons-outlined"

<i class="material-icons">account_balance</i>
<i class="material-icons-outlined">account_balance</i>

Esse padrão também funcionará com material angular:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>

Coloque no link principal para os estilos do Google

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

e no corpo algo parecido com isto

<i class="material-icons-outlined">bookmarks</i>

Acabei usando o aplicativo IcoMoon para criar uma fonte personalizada usando apenas os novos ícones temáticos necessários para uma compilação recente de aplicativos da web. Não é perfeito, mas você pode imitar a funcionalidade existente da fonte do Google muito bem com um pouco de configuração. Aqui está um artigo:

https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

Se alguém estiver se sentindo ousado, poderá converter o tema inteiro usando o IcoMoon. Inferno, o IcoMoon provavelmente possui um processo interno que facilitaria, pois eles já têm os Ícones de Materiais originais definidos em sua biblioteca.

Enfim, essa não é uma solução perfeita, mas funcionou para mim.

Fiquei insatisfeito por saber até que o Google ainda não lançou seus novos designs como fonte ou conjunto de ícones svg. Portanto, montei um pequeno pacote npm para resolver o problema.

https://www.npmjs.com/package/ts-material-icons-svg

Simplesmente importe os ícones que deseja usar e adicione-os ao seu registro. Isso também suporta agitação de árvore, pois apenas esses ícones são adicionados ao seu projeto que você realmente deseja e / ou precisa.

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

para usar dois ícones de tom, por exemplo

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

No seu modelo html, agora você pode usar o novo ícone

<mat-icon svgIcon="edit"></mat-icon>

Um tanto hilariante, o Google criou uma fonte que funciona corretamente no Safari, mas não no Chrome. Aqui está o https://codepen.io/anon/pen/zbavza

<i class="material-icons-round red">warning</i>

Em referência a https://stackoverflow.com/a/54902967/4740291 e não é possível alterar a cor usando css.

Configurando a cor de dois tons:

Conforme descrito acima, você pode usar a colortecla css, exceto para materiais Tema de dois tons que parece estar com defeito ;-)

Uma solução alternativa é descrito em um de vários materiais github angular problema é através da utilização de um filtro de CSS personalizado. Esse filtro personalizado pode ser gerado aqui .

Por exemplo:

Html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">

<i class="material-icons-two-tone red">home</i>

css:

.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

Anexos:

• Stackblitz angular de trabalho
• Exemplo de Codepen
• Gerador de filtro CSS Codepen