Angular Material Table - CSS to get headers to left align when text wraps

With the Angular Material Table component, by default, the column headers on a table will left align, which is great:



However, if there isn't enough room for the header then the text wraps, which is fine except that the text then center aligns...



How do I make the text left align? I thought this would be straight forward, but I'm having issues. This also only appears to happen on headers with sorting, because if you remove the mat-sort-header directive from any of the header cells, things left align correctly.

I tried adding the following css class definition, but no luck:

.mat-sort-header-button {
text-align: left;
}


Here is the demo I'm playing around with.

Continue reading...