Я установил Материал для углового,
Я импортировал в свое приложение модуль 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
источник
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import "~material-icons/iconfont/material-icons.css";
в свой styles.cssДля Angular 6+:
npm install material-design-icons
добавьте стили в angular.json:
источник
Если вы используете SASS, вам нужно только добавить эту строку в свой основной
.scss
файл:Если вы предпочитаете не получать значки из Google, вы также можете самостоятельно разместить значки, как описано в Руководстве по значкам материалов :
источник
Вы должны импортировать MatIconModule и использовать следующий URL-адрес в index.html
источник
В моем случае был применен стиль, который переопределяет семейство шрифтов. Итак, я явно добавил стиль семейства шрифтов следующим образом:
источник
Полное решение может быть:
Шаг первый
Вы должны импортировать
MatIconModule
в свой проект, в моем проекте я импортирую необходимый компонент в отдельный файл, а затем импортирую его в AppModule, вы можете использовать это или импортировать их напрямую:Шаг второй
Загрузите шрифт значка в свой
index.html
:источник
В моем случае имя значка, которое я написал, не было связано ни с одним значком.
Вы можете проверить правильность имен здесь: https://material.io/tools/icons/?style=baseline
источник
В моем случае значки не отображались, потому что я испортил свои шрифты, используя! Important. Вытащив это, появились значки.
источник
Я столкнулся с проблемой, что значки не отображаются для меня. Я последовал инструкциям Басавараджа Бхусани, но все еще не работал.
Я обнаружил, что проблема заключалась в том, что в моем scss у меня был значок, из-за
text-transform: uppercase
которого значок просто отображал содержимое «arrow_forward». Мне пришлось специально изменитьtext-transform: none
значок на значке, иначе он не будет отображаться.источник
Я понял, что сначала никто не говорил об установке hammerJs, прежде чем импортировать его в свое приложение. Для людей, у которых есть аналогичная проблема, вам сначала нужно импортировать hammerJs, вы можете использовать NPM, Yarn или google CDN для установки. Этот ответ предназначен для установки с NPM или Yarn:
НПМ
Пряжа
После установки импортируйте его в точку входа вашего приложения (например, src / main.ts).
Если вы предпочитаете использовать Google CDN, пожалуйста, посетите материалы об Angular для получения дополнительных сведений https://material.angular.io/guide/getting-started.
источник
Неверное имя значка : некорректное название значка материала.
Например : Значок материала предоставляет filter_alt для
но он появляется 😟
Исправлено: мы должны использовать filter_list_alt для значка типа воронки как
источник
Если вы перезаписали какой-либо существующий стиль Angular Material или любой другой стиль, который каким-либо образом влияет на значок, это может вызвать проблему. Переместите код значка за пределы каких-либо стилей и проверьте.
Для меня это был вариант шрифта: small-caps;
Поэтому я просто переместил его в дочерний элемент. Ниже представлена часть сетки Angular Material.
источник
Просто добавьте в свой index.html следующее:
источник
источник