How to solve 'mat-toolbar' is not a known element?

Question

Angular

I have a shared module in which I import MatToolbarModule and MatIconModule. And in the same module there is a component in which I use tags from angular matirials. But, when I run the application, I get an error and 'mat-toolbar' is not a known element, 'mat-icon' is not a known element. What am I doing wrong or what am I missing?
shared module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
import { HeaderComponent } from './layouts/header/header.component';
import { SiteLayoutComponent } from './layouts/site-layout/site-layout.component';
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatIconModule } from "@angular/material/icon";
import { MatButtonModule } from "@angular/material/button";

@NgModule({
  declarations: [
    AuthLayoutComponent,
    HeaderComponent,
    SiteLayoutComponent
  ],
  imports: [
    CommonModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
  ]
})
export class SharedModule { }

Component (AuthLayoutComponent) where I use mat-toolbar and mat-icon:

<mat-toolbar class="w-100">
  <h2>***</h2>

  <button mat-icon-button class="right">
    <mat-icon>shopping_cart</mat-icon>
  </button>

  <button mat-icon-button class="right">
    <mat-icon>account_circle</mat-icon>
  </button>
</mat-toolbar>