Como usar os novos temas do Material Design Icon: Delineado, Arredondado, Dois tons e Nítido?

171

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.

icons  material-design  google-material-icons 
— Ashil John
fonte

Respostas:

171

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.

— Ashil John
fonte
Olá! isso é bastante útil, mas ainda não consigo incluir meu ícone, quero incluir screen_share, tentei com a classe .outline-screen_share, mas ela imprime qualquer coisa, eu checo a classe no inspetor e ela existe, posso perder algum passo?
— Cucuru
1
@ucucuru Obrigado, acho que você perdeu a Etapa 2 . Adicionando a classe .material-icons-newe suas propriedades à sua própria folha de estilo e depois chamando o ícone por <i class="material-icons-new outline-screen_share"></i>.
— Ashil John
1
Agora, parece haver novas fontes CSS para os novos temas do Material Icon: codepen.io/Chan4077/pen/bZNyQG
— Edric
Ótimo! Funciona como um encanto.
— Soorya 30/08/19
Para material angular, você precisa usar em fontSetvez de class. Veja a resposta de Ron Netzer abaixo de 14/8/19.
— Russ
31

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>
Expandir snippet

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>
Expandir snippet

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>
Expandir snippet

Ou visualize-o no Codepen

— Edric
fonte
3
Parece que o coloratributo CSS atualmente não afeta a cor dos novos temas do ícone Material.
— Edric
1
O ícone descrito não está funcionando, ou seja,?
— Jismon Thomas
1
ele não aparece, mesmo que você execute esta página no ie, você pode ver que é apenas um espaço em branco, acabei usando a linha de base no ie!
— Jismon Thomas
Parece que a colorpropriedade é suportada em todos os ícones, exceto nos ícones de dois tons. (Testado a partir de hoje)
— Edric
16

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>
...
— Ron
fonte
12

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!

— rocaes90
fonte
10

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>
— fxrxz
fonte
Ah-hah, então funciona assim no Angular; isso é muito legal.
— Ashil John 29/07
5
existem alguns ícones destacados e com o sufixo _outline. Funciona somente para aqueles #
— Sangmin Lee
@SangminLee sim, esta é a lista de ícones em que deve funcionar. material.io/tools/icons/?style=outline
— fxrxz
@ Aj334 sim, é legal, você também pode aceitar esta resposta se responder à sua pergunta?
— Fxrxz 15/1018
1
Eu apenas usei isso com a fonte da Web simples Material em um projeto React.js. Portanto, não tem nada a ver com Angular. Eu acho que essa é a solução.
— Juuro
9

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.

— Vano Maisuradze
fonte
Para Angular, use <mat-icon class="material-icons-two-tone">alarm</mat-icon>. Substituir a classe com qualquer um material-icons, material-icons-outlined, material-icons-two-tone, material-icons-sharpou material-icons-round. E substitua o alarme por qualquer nome de ícone de: material.io/resources/icons/?icon=assessment&style=baseline
— Quad Coders
Usando mat-icon significa, você está adicionando um módulo adicional, o que aumenta o tamanho do aplicativo (bem, aumenta um pouco, mas às vezes alguns kb são importantes)
— Vano Maisuradze
@VanoMaisuradze você pode criar um link para o documento?
— Mehulkumar 13/07
AFAIK, não há documentos para isso.
— Vano Maisuradze 13/07
5

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

— Martin
fonte
Esse projeto não publica uma versão há 2 anos, não estou prendendo a respiração.
— Coderer
3

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>
— lakshmeesha
fonte
3

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.

— Binarus
fonte
2

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>
— intergaláctico
fonte
Manterei essa abordagem simples até a solução do atributo ser lançada. Bom @intergalactic
— Sparker73
E se eu receber os ícones dependenciesno package.json do aplicativo em vez de <link>? Não consigo incluir ícones delineados no URL ...
— Jago
1

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>
— Володимир Лук'янюк
fonte
0

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.

— Lee Martin
fonte
0

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>
— MarcusCalidus
fonte
0

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:

— zerocewl
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.