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

Question

Sorry if I duplicate a question - didn't find any information about my problem.

I'm using angular 6 with material design. I need to change size of a button mat-fab-mini and icon inside it. At inspect tool html presented with such way:

To change size I used following code, but it doesn't make smaller size of icon inside the button:

html

<button mat-mini-fab class="my-fab">
    <mat-icon aria-label="favorite">favorite</mat-icon>
</button>

scss

.my-fab {
    width: 20px;
    height: 20px;
    line-height: 16px;

    .mat-button-wrapper {
         padding: 2px 0 !important;
         line-height: 16px !important;
         width: 16px !important;
         height: 16px !important;

         .mat-icon {
              font-size: 16px;
              padding-right: 4px;
              line-height: 16px;
          }
    }
}

And here is result:

Attributes of .mat-button-wrapper doesn't change at all. Icon is at the bottom of button and size of icon didn't change. How can I change the size of icon at material2 to avoid it?

Answer 1

Quick and easy :)

<button mat-mini-fab color="primary" [ngStyle]="{transform: 'scale(0.8)'
              }">
   <mat-icon>cloud_download</mat-icon>
</button>