Angular Material Icon clearly won't align no matter what you do to it? Although Flex Layout directives and CSS affect it, it's just never aligned

Question

Example: https://i.sstatic.net/8M5rR.png

I have tried fxFlexAlign - fxLayoutAlign on the parent, giving it an ID and using display:flex + justify-content:center with !important on everything.

The thing is -- all of the above do something to it, it reacts to the CSS and FlexLayout directives but the thing still looks obviously misaligned no matter what.

Upon inspection it becomes clear that it grows from the right bottom corner of its 'container' and simply does not care about aligning in any way.

Is there something I'm missing on dealing with these? I've looked through the documentation + stackoverflow + googled it and can't find a thing.

Answer 1

You mention in a comment in the answer you posted that you are changing font size and that triggers the problems. I think I recall noticing a bug with this - at least I know I've run into it. In addition to font-size you need to adjust width and height accordingly. Practically speaking, it's probably best to define classes to handle all that and apply them to the mat-icon elements. For example:

.mat-icon-16 {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

<mat-icon class="mat-icon-16">help<mat-icon>

Note that line-height also plays a roll but by default it is '1' so you shouldn't need to change that.