Os ícones de material angular não funcionam

Eu instalei o material para angular,

Eu importei em meu módulo de aplicativo MatIconModule (com import { MatIconModule } from '@angular/material/icon';)

Eu adicionei em minhas importações ngmodule com:

@NgModule({
    imports: [ 
//...
MatIconModule, 
//...

Eu importei todas as folhas de estilo

E também importei no meu componente de aplicativo que está realmente (tentando) usando-os (com outra import {MatIconModule} from '@angular/material/icon';linha no início).

Mas os ícones de materiais ainda não aparecem.

Por exemplo, com esta linha:

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

Estou esperando algo assim:

Mas eu entendo:

Tem alguma sugestão?

Adicionar folha de estilo CSS para ícones de materiais!

Adicione o seguinte ao seu index.html:

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

Consulte - https://github.com/angular/material2/issues/7948

Para Angular 6+:

1. npm instale isto: npm install material-design-icons

2. adicione os estilos a angular.json:

   "styles": [
     "node_modules/material-design-icons/iconfont/material-icons.css"
   ]
   

Se estiver usando SASS, você só precisa adicionar esta linha ao seu .scssarquivo principal :

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

Se você preferir evitar obter ícones do Google, também pode hospedar os ícones automaticamente, conforme descrito no Guia de ícones de materiais :

Para aqueles que desejam hospedar a fonte da Web por conta própria, algumas configurações adicionais são necessárias. Hospede a fonte do ícone em um local, por exemplo https://example.com/material-icons.woff e adicione a seguinte regra CSS:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

Além disso, as regras CSS para renderizar o ícone precisarão ser declaradas para renderizar a fonte corretamente. Essas regras normalmente são servidas como parte da folha de estilo Google Web Font, mas precisarão ser incluídas manualmente em seus projetos ao hospedar a fonte automaticamente:

.material-icons {
  font-family: '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;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

No meu caso, houve um estilo aplicado que substitui a família da fonte. Então, adicionei um estilo de família de fontes explicitamente como este:

.material-icons{
    font-family: 'Material Icons' !important;
}

Você deve importar MatIconModule e usar o seguinte url em index.html

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

A solução completa pode ser:

Passo um

Você tem que importar MatIconModuleno seu projeto, no meu projeto eu importo o componente necessário em um arquivo separado e depois o importo no AppModule, você pode usar isso ou importá-los diretamente:

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

Passo dois

Carregue a fonte do ícone em seu index.html:

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

No meu caso, o nome do ícone que escrevi não estava associado a nenhum ícone.

Você pode verificar os nomes corretos aqui: https://material.io/tools/icons/?style=baseline

No meu caso, os ícones não apareceram porque baguncei minhas fontes usando! Important. Tirar isso fez com que os ícones aparecessem.

Corri para o problema de ícones que não são exibidos para mim. Eu tinha seguido os passos fornecidos por Basavaraj Bhusani, mas ainda não estava funcionando.

Eu descobri que o problema era que no meu scss, eu tinha o text-transform: uppercaseque estava fazendo com que o ícone apenas exibisse o conteúdo 'arrow_forward'. Tive que mudar o text-transform: noneícone especificamente, caso contrário ele não seria renderizado.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }

Percebi que ninguém falou sobre instalar o hammerJs antes de importá-lo para o seu aplicativo. Bem, para pessoas que têm um problema semelhante, você precisa importar o hammerJs primeiro, você pode usar o NPM, Yarn ou google CDN para a instalação. Esta resposta é para instalação com NPM ou Yarn:

NPM

npm install --save hammerjs

Fio

yarn add hammerjs

Após a instalação, importe-o no ponto de entrada do seu aplicativo (por exemplo, src / main.ts).

import 'hammerjs';

Se você preferir usar o Google CDN, visite o material Angular para obter mais explicações https://material.angular.io/guide/getting-started

Nome do ícone errado : o nome de algum ícone de material está errado.

Por exemplo : Material Icon fornece filter_alt para

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

mas aparece 😟

Correção: temos que usar filter_list_alt para o ícone do tipo de funil como

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>

Se você substituiu algum estilo existente de material angular ou qualquer outro estilo que de alguma forma afete o ícone, isso pode causar um problema. Mova o código do ícone fora de qualquer estilo e teste.

Para mim, era a variante da fonte: versalete;

Então, acabei de movê-lo para o elemento filho. Abaixo está parte da grade de Material Angular.

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>

Basta adicionar o seguinte ao seu index.html:

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

**Add following code to your css**

 .material-icons {  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;

    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}