Change the icon size of AngularJS Material icons

CssIconsMaterial Design

Css Problem Overview

I have referenced"> then declared an icon

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

But how can I change the icon size?

On oficial site I can see they using classes like class="md-icon dp48" but it is not working in my case.

Css Solutions

Solution 1 - Css

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

 /* Rules for sizing the icon. */ { font-size: 18px; } { font-size: 24px; } { font-size: 36px; } { font-size: 48px; }

/* Rules for using icons as black on a light background. */ { color: rgba(0, 0, 0, 0.54); } { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */ { color: rgba(255, 255, 255, 1); } { 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

Solution 2 - Css

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>

Solution 3 - Css

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);

Solution 4 - Css

You can use normal css, but must override inline styling with:

font-size: 50px !important;

Solution 5 - Css

The best way to change the size of a Materialize Icon is by adding a modifier to the i class:

<i class="material-icons small">menu</i>
<i class="material-icons medium">menu</i>
<i class="material-icons large">menu</i>

You can find more on changing the icon size on the Materialize site under icons.

Solution 6 - Css

you can change the font-size property, it will reflect on the icon because it's a "FONT ICON"

Solution 7 - Css

Sometimes setting font size will not reduce the icon size. Coz, the recommended font-size is either 18, 24, 36 or 48px.

Try setting "height" , "width", "line-height" attributes for that particular icon. This might help.

Solution 8 - Css

There is a size attribute associated with icon tag like size=18>check_circle

so using size attribute, we can change the size of the icons.

Solution 9 - Css

I followed the answer delivered by Claudios and had to do an additional change. I am using MDL and for the icon to be centered in a button it was necessary to change position left property (default is left:50%).

CSS: { 
font-size: 36px; 
position: absolute;
left: 40%;

And in HTML:

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


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsreginogemohView Question on Stackoverflow
Solution 1 - CssclaudiosView Answer on Stackoverflow
Solution 2 - Cssuser1670304View Answer on Stackoverflow
Solution 3 - Cssangularrocks.comView Answer on Stackoverflow
Solution 4 - CssPatryk TiesView Answer on Stackoverflow
Solution 5 - CssM.A.WilliamsView Answer on Stackoverflow
Solution 6 - CssAhmad MayoView Answer on Stackoverflow
Solution 7 - CssJaganView Answer on Stackoverflow
Solution 8 - Cssprat_bhanView Answer on Stackoverflow
Solution 9 - CssMarcinView Answer on Stackoverflow