Mat-icon prefix on a button breaks the first letter uppercase CSS

[natsuki0623]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When I use CSS to put the first letter of a button uppercase, adding a mat-icon as prefix on this button shouldn't change a thing.

What is the current behavior?

When I add a mat-icon as prefix, it breaks the CSS, and I no longer have an uppercase first letter

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-progress-spinner-5te7th

What is the use-case or motivation for changing an existing behavior?

It is quite embarrassing to use a tag on the first letters of all buttons including an icon as prefix

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular5, all major browsers

[crisbeto]

I don't think there's much we can do about it. What ends up happening is that the browser capitalizes the first letter inside the icon, rather than the button. You should be able to work around it by using an SVG icon.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}