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

Question

: ：

How to change mat-icon size in Material (9 answers)

Closed last year .

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

Answer 1

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.

Answer 2

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,

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

Answer 3

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>

Answer 4

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.

Answer 5

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

Answer 6

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.

Answer 7

try first using:

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

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

.mat-icon {
    width: 10px;
}

Good luck !!!

Answer 8

To change mat-icon font-size for whole project, I created an icon.css file and added it into angular.json

Content inside icon.css :

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px; // Changing font-size for whole project
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

In angular.json add the icon.css file to your styles in build :

...

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    ...,
    "styles": [
        {
        "input": "src/assets/app-theme.scss -- if any"
        },
        "src/styles.scss -- if any",
        "src/assets/angular-material/icon.css"

...

Note: Include stylesheets as per your project