angular material md-tab label upper/lower case

Question

I apologize if this question has been asked before but I have a really stupid problem and I cannot find an answer.

Using angular-material's the label is always rendered upper case. I tried using a div to wrap the text inside with no luck.

Does anyone have a suggestion? Why did they choose this behavior? (and nobody seems upset)

I have the feeling I am doing something incredibly stupid! :)

Thanks

Answer 1

The pitfall of using components that other people design and build is they get to make the aesthetic decisions.

If you're ever wondering what is causing some behavior, the best first step is to view the source and inspect the elements.

Looking at .md-tab, the text-transform style property on .md-tab is set to uppercase. Set it to none in your style section to get rid of any text-transformation:

.md-tab{text-transform: none}