Change The Icon Size Of AngularJS Material Icons

Answer :

By reading the material design in github I found these useful stuff that might help you.

 /* Rules for sizing the icon. */ .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; }  /* Rules for using icons as black on a light background. */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }  /* Rules for using icons as white on a dark background. */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } 

From the code above, there you can simply change or override the material css icons.

Sample code:

<i class="material-icons md-18">face</i> 

More details here

If I'm doing a one-off I usually just add a style= modification to the font-size in the tag. But yes long story short there's no real trick to it other than defining your own size styles to attach in css as a more permanent solution.

<i class="material-icons" style="font-size: 50px">insert_invitation</i> 

if you are using scss

@mixin md-icon-size($size: 24px) {   font-size: $size;   height: $size;   width: $size; }  .md-icon-16 {   @include md-icon-size(16px); }  .md-icon-18 {   @include md-icon-size(18px); }  .md-icon-24 {   @include md-icon-size(24px); }  .md-icon-36 {   @include md-icon-size(36px); }