Angular material md-tab uppercase / lowercase label

Question

I apologize if this question has been asked before, but I have a really stupid problem and I can’t find the answer.

Using an angular material, the label is always displayed in uppercase. I tried using a div to wrap text inside with no luck.

Does anyone have a suggestion? Why did they choose this behavior? (and no one is upset)

I have a feeling that I'm doing something incredibly stupid! :)

thanks

Answer 1

The trap of using components that are designed and created by other people is to make aesthetic decisions.

If you are ever wondering what causes some kind of behavior, the best first step is to look at the source and check the elements.

In .md-tab text-transform style property on .md-tab set to uppercase . Set it to none in the style section to get rid of any text conversion:

.md-tab{text-transform: none}