diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
index fe61646a101..bc289590cfd 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
@@ -8,8 +8,8 @@
 
 /// <reference types="resize-observer-browser" />
 import {AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {MatSlideToggleChange} from '@angular/material/slide-toggle';
-import {MatTabNav} from '@angular/material/tabs';
+import {MatLegacySlideToggleChange as MatSlideToggleChange} from '@angular/material/legacy-slide-toggle';
+import {MatLegacyTabNav as MatTabNav} from '@angular/material/legacy-tabs';
 import {Events, MessageBus, Route} from 'protocol';
 import {Subscription} from 'rxjs';
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
index 6283fba4f57..f8917922c41 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts
@@ -8,12 +8,12 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatMenuModule} from '@angular/material/menu';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu';
+import {MatLegacySlideToggleModule as MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatLegacyTabsModule as MatTabsModule} from '@angular/material/legacy-tabs';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 
 import {DevToolsTabsComponent} from './devtools-tabs.component';
 import {DirectiveExplorerModule} from './directive-explorer/directive-explorer.module';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts
index a3cb1abb198..462829a5d4b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts
@@ -9,11 +9,11 @@
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {MatTreeModule} from '@angular/material/tree';
 
 import {AngularSplitModule} from '../../vendor/angular-split/public_api';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts
index 011f7432d0b..ad0c93b1ce8 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts
@@ -8,9 +8,9 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 
 import {BreadcrumbsComponent} from './breadcrumbs.component';
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts
index d2c84cee4f2..8d90364ca19 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts
@@ -9,9 +9,9 @@
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 
 import {BreadcrumbsModule} from './breadcrumbs/breadcrumbs.module';
 import {DirectiveForestComponent} from './directive-forest.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts
index 023536cd24d..dcca3fd2f91 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts
@@ -8,9 +8,9 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 
 import {FilterComponent} from './filter.component';
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts
index 1ae16b50ecc..10e5fa5bfab 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts
@@ -8,10 +8,10 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 
 import {ComponentMetadataComponent} from './component-metadata.component';
 import {PropertyTabHeaderComponent} from './property-tab-header.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts
index b210c715ac4..f294f05de3d 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts
@@ -10,11 +10,11 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatIconModule} from '@angular/material/icon';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatTreeModule} from '@angular/material/tree';
 
 import {PropertyEditorComponent} from './property-editor.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts
index 8e0ae352c08..1a6f87f65f0 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 
 interface DialogData {
   profilerVersion?: number;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts
index 28939878256..334fb621873 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {Events, MessageBus, ProfilerFrame} from 'protocol';
 import {Subject, Subscription} from 'rxjs';
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts
index 6b0cf6ea7e2..dc973193ade 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts
@@ -9,12 +9,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
-import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
-import {MatSelectModule} from '@angular/material/select';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
+import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 
 import {ProfilerImportDialogComponent} from './profiler-import-dialog.component';
 import {ProfilerComponent} from './profiler.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts
index 0242e8fa036..40e1fe66cfd 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts
@@ -8,9 +8,9 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatTooltipModule} from '@angular/material/tooltip';
 import {NgxFlamegraphModule} from 'ngx-flamegraph';
 
 import {AngularSplitModule} from '../../../../vendor/angular-split/public_api';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts
index 2e3d3f999cb..98dc05761ba 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts
@@ -10,15 +10,15 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
-import {MatInputModule} from '@angular/material/input';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {MatSelectModule} from '@angular/material/select';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
+import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatLegacyProgressBarModule as MatProgressBarModule} from '@angular/material/legacy-progress-bar';
+import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {NgxFlamegraphModule} from 'ngx-flamegraph';
 
 import {FrameSelectorComponent} from './frame-selector.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts
index c01c43779fd..1ec909fcf40 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts
@@ -8,7 +8,7 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatDialogModule} from '@angular/material/dialog';
+import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
 import {MatSelectModule} from '@angular/material/select';
 
 import {RouterTreeComponent} from './router-tree.component';
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.module.ts b/devtools/projects/ng-devtools/src/lib/devtools.module.ts
index 1fadc433ec7..fa3369258bc 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.module.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools.module.ts
@@ -8,8 +8,8 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyProgressSpinnerModule as MatProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 
 import {DevToolsTabModule} from './devtools-tabs/devtools-tabs.module';
 import {DevToolsComponent} from './devtools.component';
diff --git a/devtools/src/app/demo-app/todo/app-todo.component.ts b/devtools/src/app/demo-app/todo/app-todo.component.ts
index 58a2a46779b..ed69d2c47cd 100644
--- a/devtools/src/app/demo-app/todo/app-todo.component.ts
+++ b/devtools/src/app/demo-app/todo/app-todo.component.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 
 import {DialogComponent} from './dialog.component';
 
diff --git a/devtools/src/app/demo-app/todo/app.module.ts b/devtools/src/app/demo-app/todo/app.module.ts
index 0b88dfebaaa..a7135bc0878 100644
--- a/devtools/src/app/demo-app/todo/app.module.ts
+++ b/devtools/src/app/demo-app/todo/app.module.ts
@@ -9,9 +9,9 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
+import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
+import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
 import {RouterModule} from '@angular/router';
 
 import {AppTodoComponent} from './app-todo.component';
diff --git a/devtools/src/app/demo-app/todo/dialog.component.ts b/devtools/src/app/demo-app/todo/dialog.component.ts
index 874a027689f..2f74e25a367 100644
--- a/devtools/src/app/demo-app/todo/dialog.component.ts
+++ b/devtools/src/app/demo-app/todo/dialog.component.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 
 export interface DialogData {
   animal: string;
diff --git a/devtools/src/styles.scss b/devtools/src/styles.scss
index 66bd0f20ae0..bb87d3e30fd 100644
--- a/devtools/src/styles.scss
+++ b/devtools/src/styles.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'external/npm/node_modules/@angular/material/index' as mat;
-@include mat.core();
+@include mat.all-legacy-component-typographies();
+@include mat.legacy-core();
 
 html,
 body {
@@ -39,9 +40,9 @@ $dark-theme: map.deep-merge(
 );
 
 .light-theme {
-  @include mat.all-component-themes($light-theme);
+  @include mat.all-legacy-component-themes($light-theme);
 }
 
 .dark-theme {
-  @include mat.all-component-themes($dark-theme);
+  @include mat.all-legacy-component-themes($dark-theme);
 }