How to theme angular material component shapes?

Question

Is there any way to theme component shapes in angular material? I know material design has a shape concept that allows you to create more rounded, less rounded or even cut corners for all small/medium/large components. Is there a way to implement that in angular material?

If not then what is the best way to customize a component globally in angular material? Say I want to remove the rounded corners on all <mat-button>'s?

Zaid

Answer 1

The short answer is that Angular Material does not provide a straightforward way of doing this.

"Theming" in Angular Material is limited to color and typography. Shapes, spacing, sizes, borders, and so on are in a way "hard-coded." However, almost all of those things end up being CSS, and of course there's always a way to customize CSS. For example define some global style that does something like:

button.mat-button {
   border-radius: 0;
}

Then do that for every component and every property that you want to customize.

Note that it won't always be so straightforward because you'll need to know the internal DOM and class structure of all the components in order to apply the style where it needs to be. You'll also need to know all the component options and how they change the DOM and class structure. On top of that, some components dynamically inject style using ngStyle and that may be impossible to override.

Long story short - "redesigning" Angular Material is at best a lot of work, and more realistically not 100% achievable. If Angular Material isn't quite what you want, use something else.

Needs

That's what I was afraid of. With Material Design specification having shape themeing I was hoping that there was some way to implement this in Angular Material. I hope Angular Material conforms to the spec and allows shape themeing in the future . I could create my own components and may go that route. Thank you for your thorough answer. – Zaid

it's weird that Angular Material isn't conform with their own Material specs, vue libraries like vuetify are more mature in this area – Cystitis