Значки Angular Material не работают

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

Я импортировал в свое приложение модуль 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>

Я жду чего-то вроде этого:

Но я понял:

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

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

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

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

Обратитесь - https://github.com/angular/material2/issues/7948

Для Angular 6+:

1. npm установите это: npm install material-design-icons

2. добавьте стили в angular.json:

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

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

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

Если вы предпочитаете не получать значки из Google, вы также можете самостоятельно разместить значки, как описано в Руководстве по значкам материалов :

Для тех, кто хочет самостоятельно разместить веб-шрифт, потребуется дополнительная настройка. Разместите шрифт значка в месте, например https://example.com/material-icons.woff, и добавьте следующее правило 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');
}

Кроме того, для правильной визуализации шрифта необходимо будет объявить правила CSS для визуализации значка. Эти правила обычно обслуживаются как часть таблицы стилей Google Web Font, но их нужно будет вручную включить в ваши проекты при самостоятельном размещении шрифта:

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

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

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

В моем случае был применен стиль, который переопределяет семейство шрифтов. Итак, я явно добавил стиль семейства шрифтов следующим образом:

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

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

Шаг первый

Вы должны импортировать 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">

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

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

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

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

Я обнаружил, что проблема заключалась в том, что в моем 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';

                    }

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

НПМ

npm install --save hammerjs

Пряжа

yarn add hammerjs

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

import 'hammerjs';

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

Неверное имя значка : некорректное название значка материала.

Например : Значок материала предоставляет filter_alt для

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

но он появляется 😟

Исправлено: мы должны использовать filter_list_alt для значка типа воронки как

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

Если вы перезаписали какой-либо существующий стиль Angular Material или любой другой стиль, который каким-либо образом влияет на значок, это может вызвать проблему. Переместите код значка за пределы каких-либо стилей и проверьте.

Для меня это был вариант шрифта: small-caps;

Поэтому я просто переместил его в дочерний элемент. Ниже представлена ​​часть сетки 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>

Просто добавьте в свой 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';
}