How to change size of mat-icon on Angular Material?

Question

mat-icon tag of Angular Material always has default size is 24px. So how to change it ...???

.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}

See answers https://stackoverflow.com/questions/43887701/how-to-change-md-icon-size-in-material — , Nov 15 '18 at 13:31

score 210 · Answer 1 · answered Jul 09 '19 at 18:12

210

font-size tends to mess with the position. I do something like:

<mat-icon class="icon-display">home</mat-icon>

CSS:

.icon-display {
   transform: scale(2);
}

Where the 2 can actually be any number. 2 doubles the original size.

answered Jul 09 '19 at 18:12

Petey

2,819
1
14
23

11

This must be the selected answer, with this option the space taken by the icon increase correctly. If we only use font-size the space taken by the icon doesn't increase/decrease – hizmarck Jul 03 '20 at 17:47
6

i was the 70th... sorry – cBlaine Jan 30 '21 at 22:30
In my case font-size didn't work as expected. Icon displays at a point and my mouse click event works on other point. So, transform is a better idea in that case. – Eranki Apr 20 '21 at 14:51
see the latter answer from @Shakur. – THE AMAZING Oct 27 '21 at 22:26

holydragon · Accepted Answer · 2023-03-19T01:50:21.090

110

Since Angular Material uses 'Material Icons' Font-Family, the icon size depends on font-size.

Therefore, if you want to modify the size of the icon then you change its font-size in your CSS file.

For example,

For class:

.mat-icon {
  font-size: 50px;
}

For tag:

mat-icon {
  font-size: 50px;
}

edited Mar 19 '23 at 01:50

answered Nov 15 '18 at 05:05

holydragon

6,158
6
39
62

23

in this way the space taken by the icon doesn't increase/decrease, but keep the same, and that could be a problem – user2010955 Oct 30 '19 at 07:50
23

You have to set the `width` and `height` too. – Domske Mar 06 '20 at 13:51
After setting width and height to a value less that 24px, it looked awkward. I was able to fix it by adjusting the line height property. – Frank Jan 03 '21 at 11:05
Directly Adding styles attribute to tag worked too screen_lock_landscape – rajquest Feb 01 '22 at 19:47

score 58 · Answer 3 · edited Jul 04 '21 at 22:04

58

In order to properly wrap the font apart from setting the font size you also need to adjust the height and width

If you want to do it globally:

.mat-icon {
    font-size: 50px;
    height: 50px ;
    width: 50px;
}

If you want to apply the size only to certain icons

.customIconSize {
    font-size: 50px;
    height: 50px ;
    width: 50px ;
}

And in your HTML template

<button mat-icon-button>
    <mat-icon class="customIconSize">visibility</mat-icon>
</button>

edited Jul 04 '21 at 22:04

Mauricio Gracia Gutierrez

10,288
6
68
99

answered Oct 29 '19 at 16:28

cksrc

2,062
3
24
39

4

This should be a right answer – J.Wincewicz Jul 01 '20 at 11:15
Thank you @Shakur, yes without the `width` adjustment the icon will not be centered. – FerdTurgusen Sep 29 '20 at 21:31
7

By default the icon has style { font-size: 24px; width: 24px; height: 24px }. So we need to adjust both width and height. – Robin Huy Nov 06 '20 at 09:22
I have updated the answer with your comments – Mauricio Gracia Gutierrez Jul 04 '21 at 22:06
1

this should be the correct answer. – THE AMAZING Oct 27 '21 at 22:24
Nowdays (v14 era) the button component has view encapsulation none, so the above will not work without `!important` (not recommended) or making the block more specific (in terms of CSS). (Because the button has its own component style and component styles are always loaded after the global style.) – csisy Sep 05 '22 at 13:57
This is the best solution, as using `transform: scale(0.7)` with a value less than 1 dosen't shrink the space. – A. Parolini Feb 24 '23 at 13:53

score 12 · Answer 4 · answered Nov 15 '18 at 13:28

12

You should also change the width and height so the container matches the font-size.

Depending on your use case a good feature of the mat-icon is a bool input of [inline], set this to true and it will auto size to the element it's contained in.

answered Nov 15 '18 at 13:28

Iamamellon

129
3

score 11 · Answer 5 · edited Jul 09 '19 at 19:12

11

Create the class name matches to the actual function. It become more easy to remember, use and extend it.

.icon-2x {
    transform: scale(2);
}

.icon-3x {
    transform: scale(3);
}

edited Jul 09 '19 at 19:12

ivcubr

1,988
9
20
28

answered Jul 09 '19 at 18:30

brian

664
6
8

score 3 · Answer 6 · answered Feb 16 '19 at 23:32

3

The "font-size" approach only works for regular (font-based) sizing. Thus it doesn't work for svg icons, which the only way to resize that really worked for me so far was scaling it up/down.

answered Feb 16 '19 at 23:32

Marcos Trazzini

49
1

score -1 · Answer 7 · answered Jan 28 '20 at 06:55

-1

try first using:

.mat-icon{
    font-size: 10px;
}

If you can't, try in the following way:

.mat-icon {
    width: 10px;
}

Good luck !!!

answered Jan 28 '20 at 06:55

Karambia Cukia

29
1
7

How to change size of mat-icon on Angular Material?

7 Answers7