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

93

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:

spodziewany

Ale rozumiem:

rzeczywisty

Masz jakieś sugestie?


źródło
Może brakować czcionki. lub zostanie załadowany później.
Basavaraj Bhusani
@BasavarajBhusani jak mogę to sprawdzić?
po wykonaniu poniższych rozwiązań należy wyczyścić pamięć podręczną przeglądarki. to działało dla mnie.
Aditya Yada

Odpowiedzi:

182

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

Basavaraj Bhusani
źródło
9
Ta odpowiedź działała dla mnie, ale udało mi się również dodać tę linię do styles.css i zadziałała. @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
J. Chaney,
17
Możesz również dodać: @import "~material-icons/iconfont/material-icons.css";do swoich styles.css
Pooshon Banerjee
5
@PooshonBanerjee material-icons to osobny projekt, który nie jest obsługiwany przez zespół Angular Material.
Vedran
38

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"
    ]
    
katwhocodes
źródło
1
To jest właściwy sposób na zrobienie tego pod kątem!
Wilt
1
... i jak to zrobić podczas korzystania z Angular for Apps (jak w przypadku Cordova)
CularBytes
To działa dla mnie. Zamiast korzystać z Google API, instaluję Material Design.
Max
25

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';
}
Vedran
źródło
Rozwiązano problem, gdy ikona nie była renderowana, a zamiast tego wyświetlał się tekst Zamknij. Dodałem powyższy import do mojego pliku scss i zaczął wyświetlać ikonę „X”. Dzięki :)
vinsinraw
Mam projekt Angular 9 i po zaimportowaniu pliku czcionki ikony materiału w .scss, nadal ten sam problem, ikona materiału nie jest widoczna, wyświetla test 'visibility_off' w pliku .apk utworzonym za pomocą cordova. ale to samo działa dobrze w localhost: 4200 Więc jest jakieś inne rozwiązanie tego?
Jignesh Gothadiya
11

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">
Khabir
źródło
11

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;
}
gradosevic
źródło
5

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">
YCF_L
źródło
2

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

Marc Schluper
źródło
2

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

                    }
srunner
źródło
Dzięki! Utknąłem w tym przez wiele godzin!
Håvard Brynjulfsen
1

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

Oluwagbemi Kadri
źródło
1

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

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

wprowadź opis obrazu tutaj

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

ale się pojawia 😟

wprowadź opis obrazu tutaj

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>
M Abdullah
źródło
0

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>
Pejman Saberin
źródło
-1

Po prostu dodaj następujące elementy do swojego index.html:

link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet"
يوسف بن عبد الرزاق
źródło
Przeczytaj, jak napisać dobrą odpowiedź tutaj
User81862311
-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';
}
Lech Raj
źródło