Change size of mat-icon-button

Question

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>

btx · Answer 1 · 2022-11-30T08:14:09.477

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.

Angular 15+ Update:

For the new MDC components it is slightly different. You can also check my directive for having different icon-button-sizes. https://github.com/btxtiger/mat-icon-button-sizes

.small-icon-button {
   width: 24px !important;
   height: 24px !important;
   padding: 0px !important;
   display: inline-flex !important;
   align-items: center;
   justify-content: center;

   & > *[role=img] {
      width: 16px;
      height: 16px;
      font-size: 16px;

      svg {
         width: 16px;
         height: 16px;
      }
   }

   .mat-mdc-button-touch-target {
      width: 24px !important;
      height: 24px !important;
   }
}

This is the only answer that really works without destroying the layout of the icon within the button. — yglodt, Sep 20 '21 at 21:42

Vega · Answer 2 · 2023-03-31T05:24:47.860

31

Mat-icons are font images. To change their size you should override the font size of mat-icon. For Angular Material 8+, add the following in the components stylesheet:

.mat-icon{
    font-size:48px !important; //make it bigger, the default being 24px. 
    width:48px;                //Do not forget to adjust the 
    height:48px;               //height and/or the width, as in the demo

}

Demo

or directely in the HTML:

<mat-icon style="font-size:48px">mail</mat-icon>

For previous versions, you still can use ::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

edited Mar 31 '23 at 05:24

answered Oct 02 '17 at 19:56

Vega

27,856
27
95
103

1

This demo does not work. Just click on the button in your demo and you will see what is wrong. – Peter Maciejko Oct 03 '17 at 11:37
3

`::ng-deep .mat-icon` rule worked for me, but I also had to add `line-height: 48px !important;` to fix vertical align – Harry Jun 03 '20 at 21:47
1

This stinks if I have multiple buttons in my component. Would be nice to have an example overriding dimensions on specific button. – lostintranslation Sep 08 '20 at 22:22
@Iostranslation, The last example is for a specific button. For the other versions, I guess you can add a class or an id on the specific button and add that reference in the css as well. Would that help? – Vega Sep 09 '20 at 05:34
There is also the way of using ::nth-of-type() with the number of the button. Works well. I could update the answer if it could help – Vega Sep 09 '20 at 05:48
This answers how to resize a `mat-icon` while OP specifically asked for mat-icon-button. Using the latest answer about Angular 8 only resizes the icon, while the underlying button remains as it was. The is not ideal as the ripple and the touch are aren't the same as the icon's – Odys Oct 24 '21 at 12:36
@Odys, it was working at the time I posted. You can try to add 'mat fab' directive to the button and setting the style for .mat-fab – Vega Oct 24 '21 at 14:10

Anthony Settergren · Answer 3 · 2018-12-03T23:43:16.363

16

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>

edited Dec 03 '18 at 23:43

answered Dec 03 '18 at 23:24

Anthony Settergren

220
2
8

This answer works but doesn't scale up well, not for 64. By default there is padding between the icon and the button, using this answer for 64 there is no padding. – Odys Oct 24 '21 at 12:45

score 8 · Answer 4 · answered Dec 20 '20 at 16:28

8

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.

answered Dec 20 '20 at 16:28

Emeric

6,315
2
41
54

This happens to work with 40, but doesn't work with more. It is not ideal. – Odys Oct 24 '21 at 12:39
This well reduces the size of the icon, but not of the surrounding button, meaning there is no gain is space. – yglodt Jan 25 '22 at 21:54
@yglodt Applying the same styling to `.mat-icon-button` works for the button. In my case I also had to wrap the `` in a `` for the icon to correctly vertically align. – Wouter B May 23 '22 at 20:55

score 4 · Answer 5 · answered Jan 24 '20 at 08:19

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

Best answer. Handles icons, padding, button, ripple. Doesnt require `::ng-deep`. Cudos — Odys, Oct 24 '21 at 12:47

score 3 · Answer 6 · answered Oct 14 '20 at 23:14

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

score 3 · Answer 7 · answered May 26 '21 at 11:50

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

score 1 · Answer 8 · answered Jul 07 '20 at 15:56

1

Working perfectly in Angular 9:

<button mat-mini-fab>
  <mat-icon>search</mat-icon>
</button>

docs: https://material.angular.io/components/button/examples

answered Jul 07 '20 at 15:56

Repo Code

53
1
7

score 1 · Answer 9 · answered May 25 '23 at 08:01

1

For the new MDC components the right way to do it is using the css variables that are already provided:

button {
      --mdc-icon-button-state-layer-size: 24px;
      --mdc-icon-button-icon-size: 20px;
      padding: 0;
}

No need ng-deep or !important.

answered May 25 '23 at 08:01

Bop

11
2

This partially works. I shaved a few more pixels off. Not sure why it is so difficult to change the height of Angular Material components. I have spent an hour on this. – MadMac Jun 29 '23 at 02:42

Murugan · Answer 10 · 2020-11-10T10:41:35.617

0

  <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

edited Nov 10 '20 at 10:41

answered Apr 09 '19 at 04:32

Murugan

615
5
19

score 0 · Answer 11 · answered Jan 28 '23 at 11:34

Addition to this great answer https://stackoverflow.com/a/57759753/2376477

In order to reduce code boilerplate for different sizes I applied scss mixin

@mixin mat-icon-size($button-size, $icon-size) {

  width: $button-size !important;
  height: $button-size !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  & > *[role=img] {
    width: $icon-size;
    height: $icon-size;
    font-size: $icon-size;

    svg {
      width: $icon-size;
      height: $icon-size;
    }
  }

  .mat-mdc-button-touch-target {
    width: $button-size !important;
    height: $button-size !important;
  }
}

$mat-icon-sizes: (
  '24': (24px, 16px),
  '36': (36px, 24px),
  '72': (72px, 48px),
);

@each $name, $sizes in $mat-icon-sizes {
  .mat-icon-size-#{$name} {
    @include mat-icon-size(nth($sizes, 1), nth($sizes, 2));
  }
}

And use it like this

<button mat-icon-button class="mat-icon-size-72"><mat-icon>edit</mat-icon></button>

I prefer specific numbers but of course you can name it sm, md, lg, etc.

score 0 · Answer 12 · answered Mar 17 '23 at 16:01

Setting [inline]="true" as stated in the Angular Material Icon Docs can be used for mat-icon and works inside a button of type mat-icon-button:

...automatically sizing the icon to match the font size of the element the icon is contained in.

HTML:

<button mat-icon-button class="material-icons" color="primary">
    <mat-icon [inline]="true">play_circle_filled</mat-icon>
</button>

CSS:

.material-icons {
  font-size: 2em
}

The inline Input Property sets currently the following css for you, which is similar as other answers already suggested:

.mat-icon.mat-icon-inline {
    font-size: inherit;
    height: inherit;
    line-height: inherit;
    width: inherit;
}

For something as simple as the mat-icon component this looks like more overhead than using css in the first place.

I tried this solution, but the mat-icon does not stay centered in the mat-icon-button when it is resized. — waternova, May 25 '23 at 20:44

Change size of mat-icon-button

12 Answers12

With Angular 8+

Angular 15+ Update:

Linked