CODEWITHSUNDEEP
cssangularangular-materialgoogle-material-icons
Mike Kylmä Lampi
Mike Kylmä Lampi

Reputation: 465

Angular material adds extra space using add_outline button with flex layout

Looks like an error in a library "@angular/material"

Or in CDN source

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

I am trying to arrange divs inside mat-toolbar, but when using inside icon tag an icon add_outline, I have an extra margin. Only the icon with name "add_outline". For example, in another screenshot is "menu", and no bugs..

enter image description here enter image description here

<mat-toolbar-row style="display: flex; justify-content: space-between; align-items: center;">

    <button mat-icon-button (click)="sidenav.toggle()" onclick="this.blur()">
        <mat-icon>menu</mat-icon>
        </button>


        <span class="toolbar-title">{{title}}</span>


        <button mat-icon-button (click)="changeTitleButton('New')">
        <mat-icon>add_outline</mat-icon>
        </button>

    </mat-toolbar-row>
  </mat-toolbar>

Current version: "@angular/material": "8.0.0"

But the same things with "@angular/material": "7.2.5"

Upvotes: 1

Views: 2557

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15041

What a brilliant observation. I was able to experience the same thing... the reason is exactly the add_outline icon. which we can see after applying the class ::ng-deep .mat-icon{border:1px solid red; display: inherit !important; }

But this is a peculiar one, which we can resolve via overflow property on our parent div (which houses the mat-toolbar)... in my case, added following to CSS file:

 .parentDiv{overflow-x:hidden;}

working stackblitz available here

Upvotes: 3

Related Questions