Піктограми кутового матеріалу не працюють

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

Я імпортував у своєму модулі програми MatIconModule (with 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

Для кутових 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';

                    }

Я зрозумів, що спочатку ніхто не говорив про встановлення hammerJ, перш ніж імпортувати його у ваш додаток. Ну а для людей, у яких є схожа проблема, спочатку вам потрібно імпортувати hammerJ, для встановлення ви можете використовувати NPM, Yarn або google CDN. Ця відповідь стосується установки з NPM або пряжі:

NPM

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;

Тож я просто перемістив його до дочірнього елемента. Нижче частина сітки кутового матеріалу.

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