angularangular-material

Icon Button with outline

Right now I can add a button like

<button mat-stroked-button>
    <mat-icon>check_circle</mat-icon>
</button>

enter image description here

By doing so, the icon is NOT centered. I'm aware of answers which apply some class and manually adjust the margins pixel wise. This might have influence on future Material upgrades and I don't want to adjust them for each upgrade.

Reading the documentation I find mat-icon-button - which has no outline. Or mat-mini-fab which has a complete different appearance. And combination of mat-icon-button and mat-stroked-button is not allowed.

I've checked the Material V2 and V3 guidelines but there is no outlined icon button available.

  1. Does this mean I need to create it by my own?
  2. Is this combination missed by intent or occasionally?
Solution

  • There is no guarantee that the code designed will also work for updated package code. Since there is bound to be few breakages, since I am not aware of any customizations for the two variables in Angular Material, I am suggesting the below solution.

    I think it's just a small bug dealing with margins. Below is the problematic CSS:

    .mat-mdc-outlined-button>.mat-icon {
    margin-right: var(--mat-outlined-button-icon-spacing, 8px);
    margin-left: var(--mat-outlined-button-icon-offset, -4px);
}

    With the default values:

    --mat-outlined-button-icon-spacing: 8px;
--mat-outlined-button-icon-offset: -8px;

    This is causing the button to not be centered. They may have added since buttons with icons usually include a text component also. So there needs to be spacing between the text and the icon.

    For your particular scenario, you have two possible fixes.

    Fix it globally, but note: text with icons inside the button will have no space between them. The fix will be to set the two variables above to zero at the global level:

    body {
  --mat-outlined-button-icon-spacing: 0px;
  --mat-outlined-button-icon-offset: 0px;
}

    Stackblitz demo

    I think you should add a class and perform the fix.

    HTML:

    <button mat-stroked-button class="center-align-icon-only">
  <mat-icon>check_circle</mat-icon>
</button>

    CSS:

    .center-align-icon-only {
  --mat-outlined-button-icon-spacing: 0px;
  --mat-outlined-button-icon-offset: 0px;
}

    Stackblitz Demo