Ikony materiałów kątowych nie działają

Zainstalowałem Materiał na kątowe,

Zaimportowałem do mojej aplikacji moduł MatIconModule (z import { MatIconModule } from '@angular/material/icon';)

Dodałem go do mojego importu ngmodule z:

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

Zaimportowałem wszystkie arkusze stylów

Zaimportowałem go również do komponentu aplikacji, który faktycznie (próbuje) ich używać (z inną import {MatIconModule} from '@angular/material/icon';linią na początku).

Ale ikony materialne nadal się nie pojawiają.

Na przykład w tej linii:

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

Spodziewam się czegoś takiego:

Ale rozumiem:

Masz jakieś sugestie?

Dodaj arkusz stylów CSS dla ikon materiałów!

Dodaj do swojego pliku index.html:

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

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

Dla Angular 6+:

1. npm zainstaluj to: npm install material-design-icons

2. dodaj style do angular.json:

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

Jeśli używasz SASS, musisz tylko dodać tę linię do swojego głównego .scsspliku:

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

Jeśli wolisz uniknąć pobierania ikon z Google, możesz także samodzielnie hostować ikony, jak opisano w Przewodniku po ikonach materiałów :

Dla tych, którzy chcą samodzielnie hostować czcionkę internetową, konieczna jest dodatkowa konfiguracja. Umieść czcionkę ikony w lokalizacji, na przykład https://example.com/material-icons.woff i dodaj następującą regułę 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');
}

Ponadto reguły CSS dotyczące renderowania ikony będą musiały zostać zadeklarowane, aby poprawnie renderować czcionkę. Te reguły są zwykle udostępniane jako część arkusza stylów czcionek internetowych Google, ale podczas samodzielnego hostowania czcionki należy je uwzględnić ręcznie w swoich projektach:

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

Musisz zaimportować MatIconModule i użyć następującego adresu URL w pliku index.html

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

W moim przypadku zastosowano styl, który zastępuje rodzinę czcionek. Tak więc wyraźnie dodałem styl rodziny czcionek:

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

Pełnym rozwiązaniem może być:

Krok pierwszy

Musisz zaimportować MatIconModuledo swojego projektu, w moim projekcie importuję niezbędny komponent w osobnym pliku, a następnie importuję go do AppModule, możesz użyć tego lub zaimportować bezpośrednio:

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

Krok drugi

Załaduj czcionkę ikony do index.html:

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

W moim przypadku nazwa ikony, którą napisałem, nie była powiązana z żadną ikoną.

Tutaj możesz sprawdzić poprawne nazwy: https://material.io/tools/icons/?style=baseline

W moim przypadku ikony nie pojawiły się, ponieważ spieprzyłem czcionki, używając! Important. Usunięcie tego spowodowało pojawienie się ikon.

Natknąłem się na problem nie wyświetlających się ikon. Postępowałem zgodnie z instrukcjami Basavaraja Bhusaniego, jednak nadal nie działałem.

Zauważyłem, że problem polegał na tym, że w moim scss miałem problem, text-transform: uppercasektóry powodował, że ikona po prostu wyświetlała zawartość „arrow_forward”. Musiałem specjalnie zmienić text-transform: noneikonę na ikonie, w przeciwnym razie nie będzie renderowana.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

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

                    }

Zrozumiałem, że nikt nie mówił o instalowaniu hammerJs przed zaimportowaniem go do Twojej aplikacji. Cóż, dla osób, które mają podobny problem, musisz najpierw zaimportować hammerJs, możesz użyć NPM, Yarn lub Google CDN do instalacji. Ta odpowiedź dotyczy instalacji z NPM lub Yarn:

NPM

npm install --save hammerjs

Przędza

yarn add hammerjs

Po zainstalowaniu zaimportuj go do punktu wejścia aplikacji (np. Src / main.ts).

import 'hammerjs';

Jeśli wolisz korzystać z Google CDN, odwiedź materiał poświęcony Angularowi, aby uzyskać więcej wyjaśnień https://material.angular.io/guide/getting-started

Nieprawidłowa nazwa ikony : Niektóre nazwy ikon materiałów są nieprawidłowe.

Na przykład : Ikona materiału zapewnia filter_alt dla

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

ale się pojawia 😟

Poprawka: musimy użyć filter_list_alt dla ikony typu lejka jako

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

Jeśli nadpisałeś jakieś istniejące style Angular Material lub inne style, które w jakiś sposób wpływają na ikonę, może to spowodować problem. Przenieś kod ikony poza wszelkie style i przetestuj.

Dla mnie był to wariant czcionki: kapitaliki;

Więc po prostu przeniosłem go do elementu potomnego. Poniżej znajduje się część siatki Angular Material.

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

Po prostu dodaj następujące elementy do swojego 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';
}