61

I have referenced then declared an icon

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

But how can I change the icon size?

On oficial site https://design.google.com/icons/ I can see they using classes like class="md-icon dp48" but it is not working in my case.

Community
  • 1
  • 1
Sergino
  • 10,128
  • 30
  • 98
  • 159
  • 1
    You can't just say "it's not working in my case" and expect us to know what's going on. Post link to site or the whole code! – Miro Apr 12 '16 at 02:35

9 Answers9

100

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

claudios
  • 6,588
  • 8
  • 47
  • 90
  • why are they using `.md-icon` class but no `.material-icons` if you inspect the icon element source on https://design.google.com/icons/ - it is a bit confusing – Sergino Apr 12 '16 at 02:43
  • everything are explained in their github repository. and It's because md-icon is like an extended css taken from material-icons. For example: .md-icon { font-family: 'Material Icons'; } . – claudios Apr 12 '16 at 02:59
  • 1
    But I think google does not provide you css styles for these classes athttps://fonts.googleapis.com/icon?family=Material+Icons . You have to write them by own. – Rohit Luthra Apr 01 '17 at 11:45
  • @claudios When using Material-Kit are you supposed to add these classes yourself or are they built-in? Seems like the former. – AdjunctProfessorFalcon Jan 28 '19 at 18:24
  • @AdjunctProfessorFalcon just try to add `md-48` to see if it's working on your end. If not then you need to add custom classes. – claudios Jan 31 '19 at 05:18
31

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>
user1670304
  • 411
  • 4
  • 3
8

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);
}
angularrocks.com
  • 26,767
  • 13
  • 87
  • 104
6

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

font-size: 50px !important;

Pedro Rodrigues
  • 1,662
  • 15
  • 19
Patryk Ties
  • 69
  • 1
  • 2
4

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.

M.A.Williams
  • 223
  • 1
  • 9
1

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

Ahmad Mayo
  • 743
  • 1
  • 6
  • 12
1

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.

Jagan
  • 37
  • 10
1

There is a size attribute associated with icon tag like check_circle

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

prat_bhan
  • 129
  • 4
1

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:

.material-icons.md-36 { 
font-size: 36px; 
position: absolute;
left: 40%;
}

And in HTML:

<i class="material-icons md-36">face</i>
Marcin
  • 195
  • 1
  • 7