How to Change Size of Mat-Icon on Angular Material

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

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

How to change mat-icon size in Material

UPDATE: 2019-05-22

Newer versions of Material Design has the option to set [inline]="true" as a property on the HTML element.

I would recommend using that approach instead.

<mat-icon svgIcon="thumbs-up" inline="true"></mat-icon>

When using this, the icon will inherit from the parent container!

GLHF! :)

---

I have been getting some questions about this so I just wanted to make a clearer example of how to use it...

/* 1. Add this mixin to a "global" scss */

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
  line-height: $size;
}

/* 2. Then use it like this in you component scss */

mat-icon {
  @include md-icon-size(32px);
}

example usage

<mat-icon class="myIcon" svgIcon="search"></mat-icon>

:host {
  .myIcon {
    &mat-icon {
      @include md-icon-size(32px);
    }
  }
}

How to resize mat-button with svg mat-icon

Add transform: scale(2); style for svg element you want to resize, where 2 is 200% of actual size:

.size-24 button svg {
    width: 24px;
    height: 24px;
    transform: scale(2);
}

Change SVG size in Angular Material 2 <mat-icon> using vanilla CSS or HTML

It seems that library styles override your css inline declaration. Try maybe to add !important declaration to your style: style="font-size: 16 !important" or since you didn't provide more code, try to inspect this icon node, to check which style define the font-size.

Also check here

UPDATE:

Here is another possibly working solution. Add transform: scale(2); style for svg element you want to resize, where 2 is 200% of actual size (of course you can also downsize them using for example 0.5 value for 50%). Here is working sample for the website with your icons and link to documnetation:

.size-24 button svg {
    width: 24px;
    height: 24px;
    transform: scale(2);
}

material2: properly changing of mat-mini-fab size and icon size

Alright, I found solution. It's really hard to change inherit properties in angular material 2 components. To do that in my situation I should do as answered here (already plused :D )

So in my code I made following changes in scss:

.my-fab {
     width: 20px;
     height: 20px;
     line-height: 14px;
     font-size: 14px;

     &::ng-deep .mat-button-wrapper{
         line-height: 14px;
         padding: 0;

          .mat-icon {
              font-size: 14px;
              padding-right: 4px;
              padding-top: 4px;
          }
    }
}

And now everything looking great. If you know better and proper way to change size of mat-fab-mini and icon inside it - answer here, if it work I'll mark it as correct answer. Otherwise I'll mark my answer as correct after 2 days.

Angular mat-icon scaling own svg

If anybody is interested.

The solution of G. Tranter might be right, but didn't work here.

My icon wasn't square. I scaled it and everything worked fine.

---

Related Topics