如何从材质图标按钮中删除边框和背景

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认为只需要设置浏览器默认值。但这对此没有任何影响。

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

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

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

应用程序组件.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 { }