Angular Material styles not being applied correctly

Sometimes missing imports in app.module.ts causes this issue. Make sure you have imported all the modules which you have used in your HTML.

As per latest angular material documentation you have to import modules from its respective package instead of @angular/material/

So instead of

import { MatToolbarModule , MatButtonModule, MatIconModule} from '@angular/material';

you have to import like

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

The comments from @user18994 and @SiddAjmera answered this.

Step 4: Include a theme

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.

For more information on theming and instructions on how to create a custom theme, see the theming guide.

Source: https://material.angular.io/guide/getting-started