Angular Material squared icon buttons

Question

I use Angular Material for my UI - so for the buttons. This is, what I want:

I use raised buttons with text labels and icons - but when I want to have icons only - the raised buttons mat-raised-button is too wide.

(left mat-raised-button with no label, right as wanted)

And when I fix the width to get the button squared, it is rendered bad - since the raised button doesn't seem to be designed for "icon only":

(updated image for "rendering bad" with fixed width)

But when I switch to mat-icon-button I get a completely different, bigger, circled button that doesn't fit in space and design to the other raised buttons (and doesn't have the primary color as background).

(left as it is, right as it is wanted)

Thus, do I have to switch to a complete different framework only for my buttons - so that they look consistent and the same time small and squared? Or is there a way to solve this problem within the Angular Material framework?

Answer 1

What you mean when say "rendered bad"? This is my square icons:

HTML:

<button 
mat-raised-button 
color="primary" 
class="button small-button">
<i class="material-icons">translate</i>
</button>

In style.css:

.small-button{
      width: 36px;
      height: 36px;
      min-width: 38px !important;
      padding: 0px !important;
    }