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?
Odpowiedzi:
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
źródło
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import "~material-icons/iconfont/material-icons.css";
do swoich styles.cssDla Angular 6+:
npm install material-design-icons
dodaj style do angular.json:
źródło
Jeśli używasz SASS, musisz tylko dodać tę linię do swojego głównego
.scss
pliku:Jeśli wolisz uniknąć pobierania ikon z Google, możesz także samodzielnie hostować ikony, jak opisano w Przewodniku po ikonach materiałów :
źródło
Musisz zaimportować MatIconModule i użyć następującego adresu URL w pliku index.html
źródło
W moim przypadku zastosowano styl, który zastępuje rodzinę czcionek. Tak więc wyraźnie dodałem styl rodziny czcionek:
źródło
Pełnym rozwiązaniem może być:
Krok pierwszy
Musisz zaimportować
MatIconModule
do 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:Krok drugi
Załaduj czcionkę ikony do
index.html
:źródło
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
źródło
W moim przypadku ikony nie pojawiły się, ponieważ spieprzyłem czcionki, używając! Important. Usunięcie tego spowodowało pojawienie się ikon.
źródło
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: uppercase
który powodował, że ikona po prostu wyświetlała zawartość „arrow_forward”. Musiałem specjalnie zmienićtext-transform: none
ikonę na ikonie, w przeciwnym razie nie będzie renderowana.źródło
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
Przędza
Po zainstalowaniu zaimportuj go do punktu wejścia aplikacji (np. Src / main.ts).
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
źródło
Nieprawidłowa nazwa ikony : Niektóre nazwy ikon materiałów są nieprawidłowe.
Na przykład : Ikona materiału zapewnia filter_alt dla
ale się pojawia 😟
Poprawka: musimy użyć filter_list_alt dla ikony typu lejka jako
źródło
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.
źródło
Po prostu dodaj następujące elementy do swojego index.html:
źródło
źródło