Os ícones de material angular não funcionam


99

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:

esperado

Mas eu entendo:

real

Tem alguma sugestão?


A fonte pode estar faltando. ou é carregado mais tarde.
Basavaraj Bhusani,

@BasavarajBhusani como posso verificar isso?

depois de executar as soluções abaixo, você deve limpar o cache do navegador. funcionou para mim.
Aditya Yada de

Respostas:


194

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


10
Essa resposta funcionou para mim, mas também consegui adicionar essa linha a styles.css e funcionou. @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
J. Chaney

20
Você também pode adicionar: @import "~material-icons/iconfont/material-icons.css";a seu styles.css
Pooshon Banerjee

5
@PooshonBanerjee material-icons é um projeto separado não mantido pela equipe Angular Material.
Vedran

45

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"
    ]
    

1
Esta é a maneira angular adequada de fazer isso!
Wilt

1
... e a maneira correta de fazer isso ao usar Angular para Apps (como com Cordova)
CularBytes

Isso funciona para mim. Em vez de usar a API do Google, instalo o material design.
Máx.

29

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';
}

Enfrentou o problema quando o ícone não estava renderizando e, em vez disso, o texto Fechar estava sendo exibido. Anexei a importação acima no meu arquivo scss e começou a exibir o ícone 'X'. Obrigado :)
vinsinraw

Eu tenho o projeto angular 9 e depois de importar o arquivo de fonte do ícone do material em .scss, ainda o mesmo problema, o ícone do material não está visível, está exibindo o teste 'visibility_off' no arquivo .apk criado usando cordova. mas mesmo está funcionando bem no localhost: 4200 Então, há alguma outra solução disso?
Jignesh Gothadiya,

13

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;
}

11

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

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

5

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">


2

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


2

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';

                    }

Obrigado! Estou preso nisso há horas!
Håvard Brynjulfsen

1

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


1

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

Por exemplo : Material Icon fornece filter_alt para

insira a descrição da imagem aqui

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

mas aparece 😟

insira a descrição da imagem aqui

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>

0

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>


-2
**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';
}
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.