Проблемы с иконками угловых материалов

Question

Угловой 5+.

Угловой CLI 1.7.4

Следуйте настройке здесь: https://material.angular.io/guide/getting-started

Как я реализовал иконки материалов: https://stackoverflow.com/a/48281556/1052888

Я могу получить некоторые значки , чтобы показать, но есть несоответствия. Например, это:

<button mat-icon-button>
    <mat-icon aria-label="Edit dashboard">bug report</mat-icon>
</button>

урожайность (синий контур при щелчке показывает, насколько он не в центре):

Когда я нажимаю на карандаш, в квадратной части контура отображается анимированный кружок, который при осмотре является областью тега button.

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

Я также отключил Bootstrap, чтобы выяснить, не вызывает ли это конфликтующие проблемы.

---

Это правильно отображает:

<button mat-icon-button>
   <mat-icon aria-label="Edit dashboard">build</mat-icon>
</button>

выходов (все иконки должны быть в центре, как это):

Что я имею в виду под центрированием, так это то, что я думаю, что они должны быть центрированы в теге button, как значок build:

---

Некоторые значки вообще не отображаются:

 <button mat-icon-button>
        <mat-icon aria-label="Edit dashboard">aspect ratio</mat-icon>
 </button>

выходы:

И да, aspect ratio указан в виде значка на Угловом материале https://material.io/icons/

Синюю линию при нажатии можно обработать с помощью стилевого пролета. Bootstrap вызывает это.

Консоль выдает предупреждение о том, что не все компоненты материала могут работать правильно, если присутствует тема, поэтому я обязательно импортировал ее в angular-cli:

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/material-design-icons/iconfont/material-icons.css",
        "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"

      ],

Обновление: Я думаю, значки просто сломались. на самом сайте Angular Material, здесь , я изменил среднее сердце (избранное), чтобы отобразить значок edit mode. Здесь возникает проблема с макетом, а также не отображаются некоторые значки:

Answer 1

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

Слова, составляющие имя иконки, должны быть отделены подчеркиванием (_).

Так, например:

• вместо bug report вы должны использовать bug_report. Значок ссылки: https://material.io/tools/icons/?search=bug%20report&icon=bug_report&style=baseline

• вместо aspect ratio вы должны использовать aspect_ratio. Значок ссылки: https://material.io/tools/icons/?search=aspect&icon=aspect_ratio&style=baseline

В Angular Material следующий код работает правильно:

<button mat-icon-button aria-label="">
    <mat-icon>bug_report</mat-icon>
</button>
<button mat-icon-button aria-label="">
    <mat-icon>aspect_ratio</mat-icon>
</button> 

Демо здесь: https://stackblitz.com/edit/angular-m7sr4f

Answer 2

возможно проблема в названии иконки:

<button mat-icon-button>
    <mat-icon aria-label="Edit dashboard">report</mat-icon>
</button>

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

как bug_report