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

I succeeded this way :

html

<button mat-mini-fab color="basic" class="button24">
  <mat-icon class="icon24">attach_file</mat-icon>
</button>

css

.button24 {
  background-color: #eee;
  width: 24px;
  height: 24px;
}
.icon24 {
  font-size: 16px;
  margin-top: -8px;
}

JPM

Alright, I found solution. It's really hard to change inherit properties in angular material 2 components. To do that in my situation I should do as answered here (already plused :D )

So in my code I made following changes in scss:

.my-fab {
     width: 20px;
     height: 20px;
     line-height: 14px;
     font-size: 14px;

     &::ng-deep .mat-button-wrapper{
         line-height: 14px;
         padding: 0;

          .mat-icon {
              font-size: 14px;
              padding-right: 4px;
              padding-top: 4px;
          }
    }
}

And now everything looking great. If you know better and proper way to change size of mat-fab-mini and icon inside it - answer here, if it work I'll mark it as correct answer. Otherwise I'll mark my answer as correct after 2 days.

Quick and easy :)

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