I have created 2 custom themes using angular material utility. ng generate @angular/material:m3-theme.

I use both themes in styles.scss like this.

 .alternate-theme-m3 {
    @include mat.core-theme(m3-theme.$light-theme);
    @include mat.button-theme(m3-theme.$light-theme);
    background-color: mat.get-theme-color(m3-theme.$light-theme, secondary, 50) !important;
}

.alternate-theme-m4 {
    @include mat.core-theme(m4-theme.$light-theme);
    @include mat.button-theme(m4-theme.$light-theme);
    background-color: mat.get-theme-color(m4-theme.$light-theme, secondary, 50) !important;
}

And in my component i am toggling the class to get styles.

Q1: Is this correct approach, or any better way to apply custom these, and dynamic theme switching.

Q2: mat-button are coming very round, I could not make it little round. How can I acheive that?

Thanks.