Change size of mat-icon-button

问题:

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>

回答1:

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

---

::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

回答2:

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>

回答3:

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.

回答4:

 <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

回答5:

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