cssangularangular-materialicons

How can I use an Angular Material Icon without additional spacing?

I'm currently working with Angular Material Icons and would like to know if there is a way to use an icon without the default spacing. I noticed that Angular Material's icons are surrounded by some spacing by default (as seen in the image). Is there an easy way to remove this spacing so that I can insert the icon directly into my content without additional spacing?

The icon has no padding. That's why padding:0 doesn't help.

Thanks in advance for your assistance!

<mat-icon [matMenuTriggerFor]="menu" class="clickable">more_vert</mat-icon>

enter image description here

Solution

  • We can use the below CSS, I set the width to be hardcoded to fixed width, then use display: flex; align-items: center to center align the icon, then the text size is larger that the container, so I use overflow:hidden as a safety, to prevent the parent overflowing with the child!

      .custom-width {
    width: 10px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    border: 1px solid black; /* just added to highlight the size of the box */
  }

    Stackblitz Demo