resizing google material icons font size

Question

According to the official guide, adding "md-48" to the class is supposed the resize the font to 48px, yet here it's not working. Am I missing something? I also tried using CSS to set the font size of .material-icons to 48px yet it remains unaffected.

 /*.material-icons{ font-size: 48px; }*/ 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="container-fluid mobileMenu"> <i class="material-icons md-48">list</i> </div> 

Answer 1

I don't know about material icons and their css classes.
But if you just use !important you can overwrite the fontsize.

 .md-48 { font-size: 48px !important; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="container-fluid mobileMenu"> <i class="material-icons">list</i> <i class="material-icons md-48">list</i> </div> 

Answer 2

You can add directly in the tag the size of the icon, or add a CSS class to do this:

 .material-icons.md-60 { font-size: 60px; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="container-fluid mobileMenu"> <i class="material-icons" style="font-size:60px;">list</i> </div> <div class="container-fluid mobileMenu"> <i class="material-icons md-60">list</i> </div>