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

93

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

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

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

ожидается

Но я понял:

актуальный

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


источник
Шрифт может отсутствовать. или загружается позже.
Басаварадж Бхусани
@BasavarajBhusani, как я могу это проверить?
после выполнения решений ниже вы должны очистить кеш браузера. у меня это сработало.
Адитья Яда,

Ответы:

183

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

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

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

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

Басаварадж Бхусани
источник
10
Этот ответ сработал для меня, но я также смог добавить эту строку в styles.css, и это сработало. @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
J. Chaney
17
Вы также можете добавить: @import "~material-icons/iconfont/material-icons.css";в свой styles.css
Пушон Банерджи
5
@PooshonBanerjee material-icons - это отдельный проект, который не поддерживается командой Angular Material.
Vedran
38

Для Angular 6+:

  1. npm установите это: npm install material-design-icons
  2. добавьте стили в angular.json:

    "styles": [
      "node_modules/material-design-icons/iconfont/material-icons.css"
    ]
    
katwhocodes
источник
1
Это правильный угловой способ сделать это!
Уилт
1
... и правильный способ сделать это при использовании Angular для приложений (например, с Cordova)
CularBytes
У меня это работает. Вместо использования google api я устанавливаю материальный дизайн.
Максимум
25

Если вы используете 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';
}
Ведран
источник
Столкнулся с проблемой, когда значок не отображался, а вместо него отображался текст «Закрыть». Добавил вышеуказанный импорт в мой файл scss, и он начал отображать значок «X». Спасибо :)
vinsinraw
У меня есть проект angular 9, и после импорта файла шрифта значка материала в .scss, все еще такая же проблема, значок материала не отображается, он отображает тест 'visibility_off' в файле .apk, созданном с помощью cordova. но то же самое работает в localhost: 4200. Есть ли другое решение?
Джигнеш Готадия,
11

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Хабир
источник
11

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

.material-icons{
    font-family: 'Material Icons' !important;
}
Градошевич
источник
5

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

Шаг первый

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

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

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

Франческо Амброзини
источник
2

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

Марк Шлупер
источник
2

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

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

                    }
шруннер
источник
Благодарность! Застрял в этом часами!
Håvard Brynjulfsen
1

Я понял, что сначала никто не говорил об установке 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.

Олувагбеми Кадри
источник
1

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

Например : Значок материала предоставляет 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>
М Абдулла
источник
0

Если вы перезаписали какой-либо существующий стиль 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>
Пейман Саберин
источник
-1

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

link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet"
يوسف بن عبد الرزاق
источник
Пожалуйста , прочтите о том , как написать хороший ответ здесь
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';
}
Лекх Радж
источник