Change size of mat-icon-button

user_4430075 0
Viewed 92917

How can I change mat-icon-button size? My icon has 24px now and I would like to increase that value to 48px. I use mat-icon as a button content. I also noticed that mat-icon-button has just hardcoded 40px/40px size.

<button mat-icon-button color="primary">
    <mat-icon class="material-icons">play_circle_filled</mat-icon>
</button>
angular-material angular typescript javascript
9 Answers

Override the font size of mat-icon using either of the options. (I changed md- to mat- for the newest AM version)

For Angular Material 8+, add the following in the components stylesheet: 
.mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Demo

For previous versions, add ::ng-deep to reach that class deep in the host. The width and the height should be also set to adjust the backdrop size proportionally.

HTML:

<button mat-button>    
  <mat-icon class="material-icons">play_circle_filled</mat-icon>
</button>

CSS

::ng-deep .mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Check out the Demo

Or, if you avoid `::ng-deep`, use `ViewEncapsulation.None` (but use sparingly):

Class:

import {ViewEncapsulation} from '@angular/core';

@Component({
  encapsulation: ViewEncapsulation.None
})

Then you can style directly from the component stylesheet.

CSS:

.mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Demo

Or style it from the main stylesheet, styles.css:

styles.css

.mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Demo

And last, but not the least solution, styling can be done inline:

HTML:

<button mat-button>    
  <mat-icon style="
    height:48px !important;
    width:48px !important;
    font-size:48px !important;" class="material-icons">play_circle_filled</mat-icon>
</button>

Demo

user_54684630

With Angular 8, resizing worked for me with:

.small-icon-button {
   width: 24px !important;
   height: 24px !important;
   line-height: 24px !important;

   .mat-icon {
      width: 16px !important;
      height: 16px !important;
      line-height: 16px !important;
   }
   .material-icons {
      font-size: 16px !important;
   }
}

No ::ng-deep required.

user_49865570

In your component scss file (assuming sass):

.mat-icon-button.large {

    width: 48px;
    height: 48px;
    line-height: 48px;

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

You can change to whatever sizes you want for both the button and the icon. If they are both set to 48 that will not have any spacing around the icon. You may want to increase the button size to something like 64.

In your html:

<button mat-icon-button class="large"><mat-icon>chat</mat-icon></button>
user_67287090

Many answers unnecessarily complicated... Here is what worked for me using Angular 9:

Assuming you want your icon to be 40x40:

HTML:

<button mat-icon-button>
    <mat-icon id="add">add</mat-icon>
</button>

CSS:

.mat-icon {
    height: 40px;
    width: 40px;
    font-size: 40px;
    line-height: 40px; // DO NOT FORGET IT !
}

No need ng-deep or !important.

user_97539850

Here is an example using scss defined in the styles.scss to get round any encapsulation issues (defining it in a custom theme will also do the same). There is an added level of specificity to avoid using !important.

Here is the Stackblitz for it.

html

<h3>Normal button</h3>
<button mat-icon-button color="warn" aria-label="normal button">
    <mat-icon>cloud_upload</mat-icon>
  </button>

<h3>Large Button</h3>
<button mat-icon-button color="warn" class="icon-button-large" aria-label="small button">
    <mat-icon>cloud_upload</mat-icon>
  </button>

<h3>small button</h3>
<button mat-icon-button color="warn" class="icon-button-small" aria-label="large icon">
    <mat-icon>cloud_upload</mat-icon>
</button>

style.scss

button[mat-icon-button]{
$large-size-button: 80px;
$large-size-icon: 48px;

    &.icon-button-large {
      width: $large-size-button;
      height: $large-size-button;
      line-height: $large-size-button;
    .mat-icon {
      font-size: $large-size-icon;
      width: $large-size-icon;
      height: $large-size-icon;
      line-height: $large-size-icon;
    }
    .mat-button-ripple {
      font-size: inherit;
      width: inherit;
      height: inherit;
      line-height: inherit;
    }
  }

  $small-size-button: 24px;
  $small-size-icon: 18px;

    &.icon-button-small {
      width: $small-size-button;
      height: $small-size-button;
      line-height: $small-size-button;
    .mat-icon {
      font-size: $small-size-icon;
      width: $small-size-icon;
      height: $small-size-icon;
      line-height: $small-size-icon;
    }
    .mat-button-ripple {
      font-size: inherit;
      width: inherit;
      height: inherit;
      line-height: inherit;
    }
  }
}
user_35346360

I am using this scss styles in angular 12:

$sizes: [17, 20, 25, 35, 40];
@each $size in $sizes {
  button.mat-icon-button {
    &[size="#{$size}"] {
      line-height: initial;
      min-width: auto;
      height: #{$size}px;
      width: #{$size}px;
      .mat-button-wrapper {
        line-height: initial;
        mat-icon {
          height: auto;
          width: auto;
          line-height: initial;
          font-size: #{$size * .7}px;
        }
      }
    }
  }
}

It doesn't work with sizes less than 17, but I don't think you would need this. Hope it'll help you out :)

user_160371930
user_51223050

I know this question was posted a while back, but I like using the zoom CSS property, because it is a very simple and elegant solution and avoids several caveats.

Make sure the specificity of the selector is enough to override Angular Material's styles. This helps to avoid using the !important override, which is generally frowned upon.

button[mat-icon-button].mat-icon-button.large-icon-button {
  zoom: 1.5;  // NOTE: You may need to adjust this value to achieve exactly 48px.
}
user_44296380 
  <button md-mini-fab (click)="add()" 
    style="cursor: pointer;textdecoration:none;height:30px;width:30px">                                               
    <md-icon style="margin:-4px 1px;color:white;font-size: 16px;">add</md-icon>
    </button>

above code working perfectly in angular2

user_100946360
Related