Customizing Icons in Angular

For those using Angular 8 and above, I found that the following CSS code works perfectly for resizing icons:

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

You won't need to use any ::ng-deep selector.

Update for Angular 15+

If you are working with the new MDC components, the styling approach is slightly different. You may also want to consider using a custom directive for handling various icon button sizes. Check out my directive implementation at: 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;
   }
}

When it comes to mat-icons, they are essentially font images. To adjust their size, you will need to overwrite the font size of the mat-icon class. For Angular Material 8 and above, include the following code in the component's stylesheet:

.mat-icon{
    font-size:48px !important; //increase the size to 48px from the default 24px
    width:48px;                //remember to adjust the width 
    height:48px;               //and/or height accordingly 

}

See Demo

Alternatively, you can directly modify it in the HTML like so:

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

---

For older versions, you still have the option to use ::ng-deep to target that specific class deep within the host element. Adjusting the width and height is also necessary to maintain proportionality with the backdrop size.

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

Take a look at the Demo

---

If you prefer to avoid using `::ng-deep`, you can opt for `ViewEncapsulation.None` (but do so judiciously):

Class:

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

@Component({
  encapsulation: ViewEncapsulation.None
})

This allows you to style directly from the component's stylesheet.

CSS:

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

See Demo

---

Another approach is to style it from the main stylesheet, styles.css:

styles.css

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

See Demo

---

Lastly, inline styling is also an option for customization:

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>

See Demo

To customize the size of buttons and icons in your component's SCSS file (assuming you are using Sass), you can do the following:

.mat-icon-button.large {

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

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

You have the flexibility to adjust both the button and icon sizes to your liking. Keeping them both at 48px will eliminate any spacing around the icon. However, if you prefer a larger button size, consider increasing it to something like 64px.

When implementing this in your HTML code, use the following:

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

Here is a simple solution for setting the size of an icon in Angular 9:

If you want your icon to be 40x40, follow these steps:

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; // Make sure to include this line
}

You do not need to use ng-deep or !important.

Illustrated below is a sample utilizing scss from the styles.scss to address any encapsulation challenges (defining it within a custom theme achieves the same). It incorporates an additional level of specificity to eliminate the need for !important.

For further detail, refer to this Stackblitz demo.

html

<h3>Standard Button</h3>
<button mat-icon-button color="warn" aria-label="standard button">
    <mat-icon>cloud_upload</mat-icon>
  </button>

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

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

Although it's been a bit since this question was initially asked, I find the zoom CSS property to be quite effective and elegant for resolving certain issues.

Ensuring the selector specificity is high enough to override Angular Material styles can prevent the need for using the disliked !important override method.

button[mat-icon-button].mat-icon-button.large-icon-button {
  zoom: 1.5; // Please adjust as needed for precise sizing.
}

In my Angular 12 project, I have implemented the following SCSS styles:

$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 seems that sizes smaller than 17 are not functioning as expected, but considering the given range, it should suffice for most cases. I trust this information proves useful to you :)

In addition to the fantastic solution provided here

To streamline code redundancy for various sizes, I incorporated a 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));
  }
}

Simply utilize it as shown below

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

I personally prefer using specific numeric values, but feel free to use custom labels like sm, md, lg, and so on.

Functioning flawlessly within Angular 9:

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

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

When you set [inline]="true", as mentioned in the documentation for Angular Material Icon Docs, it allows you to use mat-icon inside a button with type mat-icon-button:

This automatically sizes the icon to match the font size of the element containing the icon.

Here's an example in HTML:

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

And here is the corresponding CSS:

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

The inline Input Property applies the following CSS rules, which are similar to what other answers have already suggested:

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

For such a simple component like mat-icon, using this property may seem like more overhead compared to just using CSS in the first place.

To properly style the latest MDC components, utilize the existing CSS variables provided:

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

Avoid using ng-deep or !important declarations.

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

This code is functioning flawlessly within an Angular2 environment.

Despite trying various solutions, I couldn't find a way to alter the size of the "touch target," and it seems others are facing the same issue (refer to GitHub problem).

Building upon the guidance provided by Bop's response, I discovered a method that worked for me (utilizing a SASS variable to streamline the process of adjusting the size value in a single location):

button {
  $icon-size: 20px; // Defining SASS variable

  --mdc-icon-button-icon-size: #{$icon-size};
  --mdc-icon-button-state-layer-size: #{$icon-size + 8};
  padding: 0;

  .mat-icon {
    height: $icon-size;
    width: $icon-size;
    font-size: $icon-size;
  }

  // Addressing the issue highlighted in https://github.com/angular/components/issues/27118
  ::ng-deep span.mat-mdc-button-touch-target {
    height: #{$icon-size + 8};
    width: #{$icon-size + 8};
  }
}

My Updated Solution for Angular 18

Note: Utilizing the position property is essential to correctly position the shadow on hover.

.btn {
    position: relative;

    .icon {
        width: 48px;
        height: 48px;
        font-size: 48px;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
    }
}