Значки с угловым материалом не работают

Я установил материал для угловых,

Я импортировал в свой модуль приложения MatIconModule (с import { MatIconModule } from '@angular/material/icon';)

Я добавил его в свой импорт ngmodule с помощью:

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

Я импортировал все таблицы стилей

И я также импортировал его в свой компонент приложения, который фактически (пытается) их использовать (с другим import {MatIconModule} from '@angular/material/icon'; строка в начале).

Но материальные иконки все же не появляются.

Например, с этой строкой:

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

Я ожидаю что-то вроде этого:

Но я получаю это:

Есть предложения?

Ответ 1

Добавьте таблицу стилей CSS для значков материалов!

Добавьте в свой index.html следующее:

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

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

Ответ 2

Если вы используете SASS, вы должны добавить эту строку в ваш основной файл .scss:

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

Ответ 3

Вы должны импортировать MatIconModule и использовать следующий URL в index.html

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

Ответ 4

Полное решение может быть:

Первый шаг

Вы должны импортировать MatIconModule в свой проект, в моем проекте я импортирую необходимый компонент в отдельный файл, затем импортирую его в AppModule, вы можете использовать это или импортировать их напрямую:

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

Шаг второй

Загрузите значок шрифта в ваш index.html:

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

Ответ 5

Я столкнулся с вопросом, что значки не отображаются для меня. Я следовал инструкциям Басавараджа Бхусани, но все еще не работал.

Я обнаружил, что проблема была в том, что в моем scss у меня был text-transform: uppercase, который заставлял иконку просто отображать содержимое "arrow_forward". Мне пришлось изменить text-transform: none на значке, в противном случае он не будет отображаться.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

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

                    }

Ответ 6

Для angular 6+:

1) npm установить это: материал-дизайн-иконки 2) добавить стили в angular.json:

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

Ответ 7

Я понял, что никто не говорил об установке hammerJs, прежде чем импортировать его в ваше приложение. Для тех, у кого похожая проблема, вам нужно сначала импортировать hammerJs, вы можете использовать либо NPM, Yarn, либо Google CDN для установки. Этот ответ для установки с NPM или Yarn:

NPM

npm install --save hammerjs

пряжа

yarn add hammerjs

После установки импортируйте его в точку входа вашего приложения (например, src/main.ts).

import 'hammerjs';

Если вы предпочитаете использовать Google CDN, пожалуйста, посетите англоязычный материал для более подробного объяснения https://material.angular.io/guide/getting-started

Ответ 8

В моем случае значки не показывались, потому что я испортил свои шрифты, используя! Важный. Если убрать это, то появились значки.

Ответ 9

В моем случае имя иконки, которое я написал, не было связано ни с одной иконкой.

Вы можете проверить правильные имена здесь: https://material.io/tools/icons/?style=baseline

Ответ 10

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