Как добавить значок в значок мата-значка

Я использую Angular with Material

 <button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>

Я пытаюсь добавить значок к кнопке, но я не могу понять, как это сделать, и не могу найти документацию для этого.

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

глядя на документы, есть следующее:

эта кнопка имеет следующий html:

<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
    <img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
    <span _ngcontent-c1="">Material</span>
  </span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>

это правильный способ сделать это?

Ответ 1

Просто добавьте <mat-icon> внутри mat-button mat-raised-button или mat-button mat-raised-button. См. Пример ниже. Не то, что я использую значок материала вместо вашего svg для демонстрационной цели:

<button mat-button>
    <mat-icon>mic</mat-icon>
    Start Recording
</button>

ИЛИ ЖЕ

<button mat-raised-button color="accent">
    <mat-icon>mic</mat-icon>
    Start Recording
</button>

Вот ссылка на демоверсию stackblitz.

Ответ 2

Все, что вам нужно сделать, это добавить директиву mat-icon-button к элементу button в вашем шаблоне. В элементе кнопки укажите желаемый значок с компонентом mat-icon.

Вам нужно будет импортировать MatButtonModule и MatIconModule в файл модуля приложения.

На странице примеров кнопок Angular Material нажмите кнопку кода вида, и вы увидите несколько примеров, в которых используется шрифт значков материала, например.

<button mat-icon-button>
  <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>

В вашем случае используйте

<mat-icon>thumb_up</mat-icon>

Согласно руководству по началу работы по адресу https://material.angular.io/guide/getting-started, вам нужно загрузить шрифт значка материала в ваш index.html.

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

Или импортируйте его в свой глобальный styles.scss.

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

Как уже упоминалось, любой значок-шрифт может использоваться с компонентом mat-icon.

Ответ 3

Добавить в app.module.ts

import {MatIconModule} из '@angular/material/icon';

& link в вашем глобальном index.html.

Ответ 4

Я предпочитаю использовать атрибут inline. Это приведет к тому, что значок будет масштабироваться в соответствии с размером кнопки.

    <button mat-button>
      <mat-icon inline=true>local_movies</mat-icon>
      Movies
    </button>

    <!-- Link button -->
    <a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>

Я добавляю это в свой styles.css, чтобы:

решить проблему вертикального выравнивания значка внутри кнопки
шрифты значков материала всегда слишком малы по сравнению с текстом кнопки

button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
  vertical-align: top;
  font-size: 1.25em;
}

Ответ 5

Значки материалов используют шрифт значков материалов, и этот шрифт должен быть включен на странице.

Вот CDN от Google Web Fonts:

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

Ответ 6

Вышеприведенный CSS можно записать в SASS следующим образом (и он фактически включает в себя все типы кнопок, а не просто button.mat-button)

button,
a {
    &.mat-button,
    &.mat-raised-button,
    &.mat-flat-button,
    &.mat-stroked-button {
        .mat-icon {
            vertical-align: top;
            font-size: 1.25em;
        }
    }
}