CODEWITHSUNDEEP
angularangular-material
GridDragon
GridDragon

Reputation: 3135

How to remove boarder and background from Material Icon Buttons

I'm setting up a new project. I've installed Angular and Material via NPM. Then I'm setting up a ToolBar from this page: https://material.angular.io/components/toolbar/overview

I copy/pasted one of the sample toolbars:

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>

Layout overall looks good. But the Icon-Buttons have a border on them.

Icons with borders

They appear to be coming from the default chrome style sheet. In dev tools they have border and color properties inherited from 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;

I tried installing normalize.css thinking there was browser defaults that just needed to be set. But that didn't have any impact on this.

The docs say that mat-icon-button should be a round boarder with a transparent background. Did I miss something setting this up?

I created a new app with ng new and the only custom thing I'm doing is importing the material resources through a shared module.

The toolbar itself is in navbar component in my core module.

app.component.html

<app-navbar></app-navbar>

Shared Module:

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 { }

Upvotes: 4

Views: 4259

Answers (1)

Rachid O
Rachid O

Reputation: 14002

make sure you have a theme included and dont forget to import 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 { }

Upvotes: 8

Related Questions