Right now I can add a button like
<button mat-stroked-button>
<mat-icon>check_circle</mat-icon>
</button>
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.
- Does this mean I need to create it by my own?
- Is this combination missed by intent or occasionally?
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 its 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>
TS:
.center-align-icon-only {
--mat-outlined-button-icon-spacing: 0px;
--mat-outlined-button-icon-offset: 0px;
}
Stackblitz Demo
Outlined icon buttons are not part of Material design, so yes you need to create a custom solution. The question on why it’s not in the Material Design specification is pure speculation and thus opinion-based.
If you don’t want to mess with margins, I think the easiest and most future-proof solution would be to take the mat-icon-button as a base and add a border:
.outlined-icon-button {
border: 1px solid rgba(0, 0, 0, 0.12);
}
Stackblitz Demo: https://stackblitz.com/edit/nkmkku?file=src%2Fexample%2Fbutton-overview-example.css
There is no 100% guarantee that it will continue to work with new Angular Material versions, but IMHO it’s the most robust solution.
You can also try to change the border radius to 4px, but it will be a bit more hacky, as the border radius of the ripple also needs to be overridden:
.outlined-icon-button {
border: 1px solid rgba(0, 0, 0, 0.12);
&,
.mat-mdc-button-persistent-ripple {
border-radius: 4px;
}
}