Мат-значок не отображается для кнопки редактирования

Question

У меня есть кнопка с изображением коврика, однако после добавления [routerlink] = "[/ edit-job]" я не могу просмотреть значок кнопки. Хотя я могу видеть всплывающую подсказку с матом и при нажатии она перенаправляет меня на страницу редактирования, но я не могу просмотреть Icon.

Текущий код для кнопки Mat

 <button
        mat-icon-button
        [routerLink]="['/edit-job']"
        matTooltip="Edit Job"
      ></button>

Однако, если я изменю свой Код для этого я могу просматривать Icon правильно

<button mat-icon-button (click)="editJob()" matTooltip="Edit Job">
            <mat-icon>edit</mat-icon>
          </button>

Может кто-нибудь сказать, что я делаю неправильно и как это исправить. Я прилагаю скриншот для лучшего понимания.

Answer 1

Вы должны включить <mat-icon>edit</mat-icon> в тег <button> и для первого случая.

Answer 2

как сказал @Sumit Vekariya, добавьте <mat-icon>edit</mat-icon> к своей кнопке

Пример:

<button mat-icon-button [routerLink]="['/edit-job']" matTooltip="Edit Job">
  <mat-icon>edit</mat-icon>
</button>

Answer 3

Как показано в документации, вы должны добавить импорт в app-module

https://material.angular.io/components/button/api

Импорт для добавления:

import {MatButtonModule} from '@angular/material/button';

А вот пример кнопки материала:

<button mat-icon-button>Click me!</button>