如何从 Material Icon Buttons 中删除边框和背景

Question

我正在建立一个新项目。 我已经通过 NPM 安装了 Angular 和 Material。 然后我从这个页面设置一个工具栏： https://material.angular.io/components/toolbar/overview

我复制/粘贴了一个示例工具栏：

navbar.component.html

  <mat-toolbar color="primary">
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
      <mat-icon>menu</mat-icon>
    </button>
    <span>My App</span>
    <span class="example-spacer"></span>
    <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
      <mat-icon>favorite</mat-icon>
    </button>
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
      <mat-icon>share</mat-icon>
    </button>
  </mat-toolbar>

整体布局看起来不错。 但是图标按钮上有一个边框。

它们似乎来自默认的 chrome 样式表。 在开发工具中，它们具有从user agent stylesheet继承的边框和颜色属性

    background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;

我尝试安装normalize.css 8CBA22E28EB17B5F5C6AE2A266AZ 认为只需要设置浏览器默认值。 但这对此事没有任何影响。

文档说mat-icon-button应该是具有透明背景的圆形边框。 我错过了一些设置吗？

我使用ng new创建了一个新应用程序，我正在做的唯一自定义事情是通过共享模块导入材料资源。

工具栏本身位于我的核心模块的navbar组件中。

app.component.html

<app-navbar></app-navbar>

共享模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';

const materialModules = [
  MatIconModule,
  MatToolbarModule,
];


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    ...materialModules
  ],
  exports: [...materialModules]
})
export class SharedModule { }

Answer 1

确保您包含一个主题并且不要忘记导入MatButtonModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';

const materialModules = [
  MatIconModule,
  MatToolbarModule,
  MatButtonModule
];


@NgModule({
  declarations: [],
  imports: [
CommonModule,
...materialModules
  ],
  exports: [...materialModules]
})
export class SharedModule { }