diff --git a/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts b/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
index 9f34469c08..cd57042b42 100644
--- a/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
+++ b/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
@@ -13,10 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
-import {
-  MatLegacySnackBarRef,
-  MAT_LEGACY_SNACK_BAR_DATA,
-} from '@angular/material/legacy-snack-bar';
+import {MatSnackBarRef, MAT_SNACK_BAR_DATA} from '@angular/material/snack-bar';
 import {Store} from '@ngrx/store';
 import {State} from '../../app_state';
 import {splitByURL} from '../../util/string';
@@ -33,8 +30,8 @@ export class AlertDisplaySnackbarContainer {
   readonly splitByURL = splitByURL;
 
   constructor(
-    private readonly snackBarRef: MatLegacySnackBarRef<AlertDisplaySnackbarContainer>,
-    @Inject(MAT_LEGACY_SNACK_BAR_DATA) readonly unknownData: unknown,
+    private readonly snackBarRef: MatSnackBarRef<AlertDisplaySnackbarContainer>,
+    @Inject(MAT_SNACK_BAR_DATA) readonly unknownData: unknown,
     private readonly store: Store<State>
   ) {
     this.alert = unknownData as AlertInfo;
diff --git a/tensorboard/webapp/alert/views/alert_snackbar_container.ts b/tensorboard/webapp/alert/views/alert_snackbar_container.ts
index 9b001c6f58..ebd8273586 100644
--- a/tensorboard/webapp/alert/views/alert_snackbar_container.ts
+++ b/tensorboard/webapp/alert/views/alert_snackbar_container.ts
@@ -18,7 +18,7 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
+import {MatSnackBar} from '@angular/material/snack-bar';
 import {Store} from '@ngrx/store';
 import {Subject} from 'rxjs';
 import {filter, takeUntil} from 'rxjs/operators';
@@ -40,7 +40,7 @@ export class AlertSnackbarContainer implements OnInit, OnDestroy {
 
   constructor(
     private readonly store: Store<State>,
-    private readonly snackBar: MatLegacySnackBar
+    private readonly snackBar: MatSnackBar
   ) {}
 
   ngOnInit() {
diff --git a/tensorboard/webapp/alert/views/alert_snackbar_module.ts b/tensorboard/webapp/alert/views/alert_snackbar_module.ts
index ed88bdbf89..5aa90179fb 100644
--- a/tensorboard/webapp/alert/views/alert_snackbar_module.ts
+++ b/tensorboard/webapp/alert/views/alert_snackbar_module.ts
@@ -14,8 +14,8 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {AlertDisplaySnackbarContainer} from './alert_display_snackbar_container';
 import {AlertSnackbarContainer} from './alert_snackbar_container';
 
@@ -25,7 +25,7 @@ import {AlertSnackbarContainer} from './alert_snackbar_container';
 @NgModule({
   declarations: [AlertSnackbarContainer, AlertDisplaySnackbarContainer],
   exports: [AlertSnackbarContainer],
-  imports: [CommonModule, MatLegacyButtonModule, MatLegacySnackBarModule],
+  imports: [CommonModule, MatButtonModule, MatSnackBarModule],
   entryComponents: [
     // Required for non-Ivy Angular apps.
     AlertDisplaySnackbarContainer,
diff --git a/tensorboard/webapp/alert/views/alert_snackbar_test.ts b/tensorboard/webapp/alert/views/alert_snackbar_test.ts
index 3d6d46de01..2870ac2f3a 100644
--- a/tensorboard/webapp/alert/views/alert_snackbar_test.ts
+++ b/tensorboard/webapp/alert/views/alert_snackbar_test.ts
@@ -14,11 +14,8 @@ limitations under the License.
 ==============================================================================*/
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {TestBed} from '@angular/core/testing';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {
-  MatLegacySnackBar,
-  MatLegacySnackBarModule,
-} from '@angular/material/legacy-snack-bar';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Action, createAction, props, Store} from '@ngrx/store';
 import {MockStore, provideMockStore} from '@ngrx/store/testing';
@@ -45,15 +42,11 @@ describe('alert snackbar', () => {
   let snackBarOpenSpy: jasmine.Spy;
   let recordedActions: Action[] = [];
   let overlayContainer: OverlayContainer;
-  let snackbar: MatLegacySnackBar;
+  let snackbar: MatSnackBar;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        NoopAnimationsModule,
-        MatLegacyButtonModule,
-        MatLegacySnackBarModule,
-      ],
+      imports: [NoopAnimationsModule, MatButtonModule, MatSnackBarModule],
       providers: [
         provideMockStore({
           initialState: buildStateFromAlertState(buildAlertState({})),
@@ -67,7 +60,7 @@ describe('alert snackbar', () => {
       recordedActions.push(action);
     });
     overlayContainer = TestBed.inject(OverlayContainer);
-    snackbar = TestBed.inject(MatLegacySnackBar);
+    snackbar = TestBed.inject(MatSnackBar);
     snackBarOpenSpy = spyOn(snackbar, 'openFromComponent').and.callThrough();
   });
 
diff --git a/tensorboard/webapp/core/views/layout_module.ts b/tensorboard/webapp/core/views/layout_module.ts
index 51ed3634a7..5a6fc1d7f4 100644
--- a/tensorboard/webapp/core/views/layout_module.ts
+++ b/tensorboard/webapp/core/views/layout_module.ts
@@ -14,7 +14,7 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {LayoutContainer} from './layout_container';
 
@@ -24,6 +24,6 @@ import {LayoutContainer} from './layout_container';
 @NgModule({
   declarations: [LayoutContainer],
   exports: [LayoutContainer],
-  imports: [CommonModule, MatIconModule, MatLegacyButtonModule],
+  imports: [CommonModule, MatIconModule, MatButtonModule],
 })
 export class LayoutModule {}
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_module.ts b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_module.ts
index a415b320aa..1e38417533 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_module.ts
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_module.ts
@@ -14,8 +14,8 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSelectModule} from '@angular/material/select';
 import {FeatureFlagDialogComponent} from './feature_flag_dialog_component';
 import {FeatureFlagDialogContainer} from './feature_flag_dialog_container';
 
@@ -24,7 +24,7 @@ import {FeatureFlagDialogContainer} from './feature_flag_dialog_container';
  */
 @NgModule({
   declarations: [FeatureFlagDialogComponent, FeatureFlagDialogContainer],
-  imports: [CommonModule, MatLegacyButtonModule, MatLegacySelectModule],
+  imports: [CommonModule, MatButtonModule, MatSelectModule],
   exports: [FeatureFlagDialogContainer],
   entryComponents: [FeatureFlagDialogContainer],
 })
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts b/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts
index a18f823f77..fba1f843ad 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts
@@ -14,10 +14,7 @@ limitations under the License.
 ==============================================================================*/
 import {ComponentType} from '@angular/cdk/overlay';
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {
-  MatLegacyDialog,
-  MatLegacyDialogRef,
-} from '@angular/material/legacy-dialog';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {Store} from '@ngrx/store';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -42,12 +39,12 @@ export class FeatureFlagModalTriggerContainer implements OnInit, OnDestroy {
   featureFlagDialogType: ComponentType<any> = FeatureFlagDialogContainer;
 
   readonly showFeatureFlags$ = this.store.select(getShowFlagsEnabled);
-  private featureFlagsDialog?: MatLegacyDialogRef<FeatureFlagDialogContainer>;
+  private featureFlagsDialog?: MatDialogRef<FeatureFlagDialogContainer>;
   private ngUnsubscribe = new Subject<void>();
 
   constructor(
     private readonly store: Store<State>,
-    private dialog: MatLegacyDialog
+    private dialog: MatDialog
   ) {}
 
   ngOnInit() {
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts b/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts
index 1436816565..5bb82fde76 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts
@@ -16,8 +16,8 @@ import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyDialogHarness} from '@angular/material/legacy-dialog/testing';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatDialogHarness} from '@angular/material/dialog/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Store} from '@ngrx/store';
 import {MockStore} from '@ngrx/store/testing';
@@ -47,7 +47,7 @@ describe('feature_flag_modal_trigger_container', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacyDialogModule, NoopAnimationsModule],
+      imports: [MatDialogModule, NoopAnimationsModule],
       providers: [provideMockTbStore()],
     }).compileComponents();
 
@@ -78,7 +78,7 @@ describe('feature_flag_modal_trigger_container', () => {
     store.overrideSelector(getOverriddenFeatureFlags, {});
     store.overrideSelector(getShowFlagsEnabled, true);
     createComponent();
-    const dialog = await rootLoader.getHarness(MatLegacyDialogHarness);
+    const dialog = await rootLoader.getHarness(MatDialogHarness);
     expect(
       (fixture.componentInstance as any).featureFlagsDialog
     ).not.toBeUndefined();
diff --git a/tensorboard/webapp/header/dark_mode_toggle_test.ts b/tensorboard/webapp/header/dark_mode_toggle_test.ts
index e5cbfaa08a..6cedfad724 100644
--- a/tensorboard/webapp/header/dark_mode_toggle_test.ts
+++ b/tensorboard/webapp/header/dark_mode_toggle_test.ts
@@ -15,8 +15,8 @@ limitations under the License.
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+import {MatButtonModule} from '@angular/material/button';
+import {MatMenuModule} from '@angular/material/menu';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Action, Store} from '@ngrx/store';
@@ -37,9 +37,9 @@ describe('dark mode toggle test', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        MatLegacyButtonModule,
+        MatButtonModule,
         MatIconTestingModule,
-        MatLegacyMenuModule,
+        MatMenuModule,
         NoopAnimationsModule,
       ],
       providers: [provideMockTbStore()],
diff --git a/tensorboard/webapp/header/header_module.ts b/tensorboard/webapp/header/header_module.ts
index b0872db4b5..9adc6ce003 100644
--- a/tensorboard/webapp/header/header_module.ts
+++ b/tensorboard/webapp/header/header_module.ts
@@ -15,11 +15,11 @@ limitations under the License.
 // Uses `async` pipe.
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
-import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSelectModule} from '@angular/material/select';
+import {MatTabsModule} from '@angular/material/tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {CoreModule} from '../core/core_module';
 import {SettingsModule} from '../settings/settings_module';
@@ -47,12 +47,12 @@ import {ReloadContainer} from './reload_container';
   ],
   providers: [],
   imports: [
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatIconModule,
-    MatLegacyTabsModule,
+    MatTabsModule,
     MatToolbarModule,
-    MatLegacySelectModule,
-    MatLegacyMenuModule,
+    MatSelectModule,
+    MatMenuModule,
     CommonModule,
     CoreModule,
     SettingsModule,
diff --git a/tensorboard/webapp/header/header_test.ts b/tensorboard/webapp/header/header_test.ts
index 081651fbf5..dbebbfe29b 100644
--- a/tensorboard/webapp/header/header_test.ts
+++ b/tensorboard/webapp/header/header_test.ts
@@ -14,9 +14,9 @@ limitations under the License.
 ==============================================================================*/
 import {DebugElement, NO_ERRORS_SCHEMA} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
-import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSelectModule} from '@angular/material/select';
+import {MatTabsModule} from '@angular/material/tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -50,10 +50,10 @@ describe('header test', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        MatLegacyButtonModule,
+        MatButtonModule,
         MatIconTestingModule,
-        MatLegacySelectModule,
-        MatLegacyTabsModule,
+        MatSelectModule,
+        MatTabsModule,
         MatToolbarModule,
         NoopAnimationsModule,
       ],
@@ -105,7 +105,7 @@ describe('header test', () => {
     const fixture = TestBed.createComponent(HeaderComponent);
     fixture.detectChanges();
 
-    const els = fixture.debugElement.queryAll(By.css('.mat-tab-label'));
+    const els = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'));
     expect(els.length).toBe(2);
 
     assertDebugElementText(els[0], 'FOO FIGHTER');
@@ -125,7 +125,7 @@ describe('header test', () => {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    const els = fixture.debugElement.queryAll(By.css('.mat-tab-label'));
+    const els = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'));
     expect(els.length).toBe(3);
     assertDebugElementText(els[0], 'MEOW');
     assertDebugElementText(els[1], 'WOOF');
diff --git a/tensorboard/webapp/header/plugin_selector_component.ts b/tensorboard/webapp/header/plugin_selector_component.ts
index fd01fe3ef5..c486424bac 100644
--- a/tensorboard/webapp/header/plugin_selector_component.ts
+++ b/tensorboard/webapp/header/plugin_selector_component.ts
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {MatLegacySelectChange} from '@angular/material/legacy-select';
+import {MatSelectChange} from '@angular/material/select';
 import {PluginId} from '../types/api';
 import {UiPluginMetadata} from './types';
 
@@ -44,7 +44,7 @@ export class PluginSelectorComponent {
     this.onPluginSelectionChanged.emit(pluginId);
   }
 
-  onDisabledPluginSelectionChanged(selectChangeEvent: MatLegacySelectChange) {
+  onDisabledPluginSelectionChanged(selectChangeEvent: MatSelectChange) {
     this.onPluginSelectionChanged.emit(selectChangeEvent.value);
   }
 }
diff --git a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts
index a9a13adebe..b20f3e4f26 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
-import {MAT_LEGACY_DIALOG_DATA} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {Store} from '@ngrx/store';
 import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
 import {filter, map, startWith} from 'rxjs/operators';
@@ -54,7 +54,7 @@ export class DataDownloadDialogContainer {
   constructor(
     store: Store<State>,
     dataSource: MetricsDataSource,
-    @Inject(MAT_LEGACY_DIALOG_DATA) data: DataDownloadDialogData
+    @Inject(MAT_DIALOG_DATA) data: DataDownloadDialogData
   ) {
     this.cardMetadata$ = store
       .select(getCardMetadata, data.cardId)
diff --git a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_test.ts b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_test.ts
index 2a45ff3cb1..0a74d72f36 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_test.ts
@@ -15,7 +15,7 @@ limitations under the License.
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {FormsModule} from '@angular/forms';
-import {MAT_LEGACY_DIALOG_DATA} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Store} from '@ngrx/store';
@@ -55,7 +55,7 @@ describe('metrics/views/data_download_dialog', () => {
       declarations: [DataDownloadDialogContainer, DataDownloadDialogComponent],
       providers: [
         provideMockStore({}),
-        {provide: MAT_LEGACY_DIALOG_DATA, useValue: dialogData},
+        {provide: MAT_DIALOG_DATA, useValue: dialogData},
         {provide: MetricsDataSource, useClass: TestingMetricsDataSource},
       ],
       schemas: [NO_ERRORS_SCHEMA],
diff --git a/tensorboard/webapp/metrics/views/card_renderer/data_download_module.ts b/tensorboard/webapp/metrics/views/card_renderer/data_download_module.ts
index eb668a670e..6439660572 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/data_download_module.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/data_download_module.ts
@@ -15,10 +15,10 @@ limitations under the License.
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatButtonModule} from '@angular/material/button';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
 import {FeatureFlagDirectiveModule} from '../../../feature_flag/directives/feature_flag_directive_module';
 import {MetricsDataSourceModule} from '../../data_source';
 import {DataDownloadDialogComponent} from './data_download_dialog_component';
@@ -31,10 +31,10 @@ import {DataDownloadDialogContainer} from './data_download_dialog_container';
     CommonModule,
     FeatureFlagDirectiveModule,
     FormsModule,
-    MatLegacyButtonModule,
-    MatLegacyDialogModule,
-    MatLegacyInputModule,
-    MatLegacySelectModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatInputModule,
+    MatSelectModule,
     MetricsDataSourceModule,
   ],
   entryComponents: [DataDownloadDialogContainer],
diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_module.ts b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_module.ts
index a1d9b4de21..5b366d1fd6 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_module.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_module.ts
@@ -14,9 +14,9 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {HistogramModule} from '../../../widgets/histogram/histogram_module';
 import {TruncatedPathModule} from '../../../widgets/text/truncated_path_module';
 import {HistogramCardComponent} from './histogram_card_component';
@@ -30,9 +30,9 @@ import {VisLinkedTimeSelectionWarningModule} from './vis_linked_time_selection_w
   imports: [
     CommonModule,
     HistogramModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatIconModule,
-    MatLegacyProgressSpinnerModule,
+    MatProgressSpinnerModule,
     RunNameModule,
     TruncatedPathModule,
     VisLinkedTimeSelectionWarningModule,
diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts
index ed1c166c45..22ac970d64 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts
@@ -14,7 +14,7 @@ limitations under the License.
 ==============================================================================*/
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Action, Store} from '@ngrx/store';
@@ -99,7 +99,7 @@ describe('histogram card', () => {
       imports: [
         NoopAnimationsModule,
         MatIconTestingModule,
-        MatLegacyProgressSpinnerModule,
+        MatProgressSpinnerModule,
         RunNameModule,
         TruncatedPathModule,
         VisLinkedTimeSelectionWarningModule,
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_module.ts b/tensorboard/webapp/metrics/views/card_renderer/image_card_module.ts
index b1993996d7..4c66b376d4 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_module.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_module.ts
@@ -14,9 +14,9 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {TruncatedPathModule} from '../../../widgets/text/truncated_path_module';
 import {ImageCardComponent} from './image_card_component';
@@ -31,9 +31,9 @@ import {VisLinkedTimeSelectionWarningModule} from './vis_linked_time_selection_w
   imports: [
     CommonModule,
     FeatureFlagDirectiveModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatIconModule,
-    MatLegacyProgressSpinnerModule,
+    MatProgressSpinnerModule,
     MatLegacySliderModule,
     RunNameModule,
     TruncatedPathModule,
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts
index a56ad4638b..2265092ea8 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts
@@ -14,8 +14,8 @@ limitations under the License.
 ==============================================================================*/
 import {Component, Input} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatButtonModule} from '@angular/material/button';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -85,9 +85,9 @@ describe('image card', () => {
     await TestBed.configureTestingModule({
       imports: [
         NoopAnimationsModule,
-        MatLegacyButtonModule,
+        MatButtonModule,
         MatIconTestingModule,
-        MatLegacyProgressSpinnerModule,
+        MatProgressSpinnerModule,
         MatLegacySliderModule,
         RunNameModule,
         TruncatedPathModule,
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts
index 3dfa773a58..74e2390576 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts
@@ -22,7 +22,7 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import {MatLegacyDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {DataLoadState} from '../../../types/data';
 import {
   TimeSelection,
@@ -131,10 +131,7 @@ export class ScalarCardComponent<Downloader> {
   @ViewChild('dataTableContainer')
   dataTableContainer?: ElementRef;
 
-  constructor(
-    private readonly ref: ElementRef,
-    private dialog: MatLegacyDialog
-  ) {}
+  constructor(private readonly ref: ElementRef, private dialog: MatDialog) {}
 
   yScaleType = ScaleType.LINEAR;
   isViewBoxOverridden: boolean = false;
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_module.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_module.ts
index 7e3d64e5ba..563903e3e5 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_module.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_module.ts
@@ -14,10 +14,10 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {ExperimentAliasModule} from '../../../widgets/experiment_alias/experiment_alias_module';
 import {IntersectionObserverModule} from '../../../widgets/intersection_observer/intersection_observer_module';
 import {LineChartModule as LineChartV2Module} from '../../../widgets/line_chart_v2/line_chart_module';
@@ -39,10 +39,10 @@ import {VisLinkedTimeSelectionWarningModule} from './vis_linked_time_selection_w
     ExperimentAliasModule,
     IntersectionObserverModule,
     LineChartV2Module,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatIconModule,
-    MatLegacyMenuModule,
-    MatLegacyProgressSpinnerModule,
+    MatMenuModule,
+    MatProgressSpinnerModule,
     ResizeDetectorModule,
     ScalarCardDataTableModule,
     ScalarCardLineChartModule,
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts
index cad08e37f9..16d6a92e5d 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts
@@ -30,12 +30,9 @@ import {
   TestBed,
   tick,
 } from '@angular/core/testing';
-import {
-  MatLegacyDialogModule,
-  MAT_LEGACY_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatDialogModule, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Action, Store} from '@ngrx/store';
@@ -220,7 +217,7 @@ class TestableLineChart {
 })
 class TestableDataDownload {
   cardId = 'hello';
-  constructor(@Inject(MAT_LEGACY_DIALOG_DATA) data: {cardId: string}) {
+  constructor(@Inject(MAT_DIALOG_DATA) data: {cardId: string}) {
     this.cardId = data.cardId;
   }
 }
@@ -336,10 +333,10 @@ describe('scalar card', () => {
         IntersectionObserverTestingModule,
         CardFobModule,
         DataTableModule,
-        MatLegacyDialogModule,
+        MatDialogModule,
         MatIconTestingModule,
-        MatLegacyMenuModule,
-        MatLegacyProgressSpinnerModule,
+        MatMenuModule,
+        MatProgressSpinnerModule,
         NoopAnimationsModule,
         ResizeDetectorTestingModule,
         TruncatedPathModule,
diff --git a/tensorboard/webapp/metrics/views/main_view/filter_input_test.ts b/tensorboard/webapp/metrics/views/main_view/filter_input_test.ts
index 8e10df5e64..7e247723b9 100644
--- a/tensorboard/webapp/metrics/views/main_view/filter_input_test.ts
+++ b/tensorboard/webapp/metrics/views/main_view/filter_input_test.ts
@@ -15,8 +15,8 @@ limitations under the License.
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
-import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatButtonModule} from '@angular/material/button';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Action, Store} from '@ngrx/store';
@@ -42,8 +42,8 @@ describe('metrics filter input', () => {
     await TestBed.configureTestingModule({
       imports: [
         NoopAnimationsModule,
-        MatLegacyAutocompleteModule,
-        MatLegacyButtonModule,
+        MatAutocompleteModule,
+        MatButtonModule,
         MatIconTestingModule,
         FilterInputModule,
       ],
diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_module.ts b/tensorboard/webapp/metrics/views/main_view/main_view_module.ts
index 706eafb970..21aaa9b0fd 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_module.ts
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_module.ts
@@ -16,12 +16,12 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 import {CommonModule} from '@angular/common';
 import {CustomizationModule} from '../../../customization/customization_module';
 import {NgModule} from '@angular/core';
-import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatButtonModule} from '@angular/material/button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatInputModule} from '@angular/material/input';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {FilterInputModule} from '../../../widgets/filter_input/filter_input_module';
 import {CardRendererModule} from '../card_renderer/card_renderer_module';
 import {RightPaneModule} from '../right_pane/right_pane_module';
@@ -68,12 +68,12 @@ import {PinnedViewContainer} from './pinned_view_container';
     CommonModule,
     CustomizationModule,
     FilterInputModule,
-    MatLegacyAutocompleteModule,
-    MatLegacyButtonModule,
+    MatAutocompleteModule,
+    MatButtonModule,
     MatButtonToggleModule,
     MatIconModule,
-    MatLegacyInputModule,
-    MatLegacyProgressSpinnerModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
     RightPaneModule,
     ScalarColumnEditorModule,
     ScrollingModule,
diff --git a/tensorboard/webapp/metrics/views/right_pane/right_pane_module.ts b/tensorboard/webapp/metrics/views/right_pane/right_pane_module.ts
index b34dd023fd..b7533a7946 100644
--- a/tensorboard/webapp/metrics/views/right_pane/right_pane_module.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/right_pane_module.ts
@@ -14,11 +14,11 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {FeatureFlagModule} from '../../../feature_flag/feature_flag_module';
 import {DropdownModule} from '../../../widgets/dropdown/dropdown_module';
@@ -37,11 +37,11 @@ import {SettingsViewContainer} from './settings_view_container';
   imports: [
     CommonModule,
     DropdownModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatButtonToggleModule,
-    MatLegacyCheckboxModule,
+    MatCheckboxModule,
     MatIconModule,
-    MatLegacySelectModule,
+    MatSelectModule,
     MatLegacySliderModule,
     FeatureFlagModule,
     RangeInputModule,
diff --git a/tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts b/tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts
index 28aaea6d44..5704b76e86 100644
--- a/tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts
@@ -20,8 +20,8 @@ import {
   tick,
 } from '@angular/core/testing';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatSelectModule} from '@angular/material/select';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -48,8 +48,8 @@ describe('metrics right_pane', () => {
         NoopAnimationsModule,
         DropdownModule,
         MatButtonToggleModule,
-        MatLegacyCheckboxModule,
-        MatLegacySelectModule,
+        MatCheckboxModule,
+        MatSelectModule,
         MatLegacySliderModule,
       ],
       declarations: [
@@ -112,7 +112,7 @@ describe('metrics right_pane', () => {
       });
     });
 
-    function getMatLegacySliderValue(el: DebugElement): string {
+    function getMatSliderValue(el: DebugElement): string {
       return el.query(By.css('.mat-slider-thumb-label-text')).nativeElement
         .textContent;
     }
@@ -176,17 +176,15 @@ describe('metrics right_pane', () => {
       );
       expect(scalarSmoothingInput.nativeElement.value).toBe('0.3');
       expect(
-        getMatLegacySliderValue(
-          select(fixture, '.scalars-smoothing mat-slider')
-        )
+        getMatSliderValue(select(fixture, '.scalars-smoothing mat-slider'))
       ).toBe('0.30');
 
       expect(
-        getMatLegacySliderValue(select(fixture, '.image-brightness mat-slider'))
+        getMatSliderValue(select(fixture, '.image-brightness mat-slider'))
       ).toBe('0.1');
 
       expect(
-        getMatLegacySliderValue(select(fixture, '.image-contrast mat-slider'))
+        getMatSliderValue(select(fixture, '.image-contrast mat-slider'))
       ).toBe('0.2');
 
       expect(
@@ -323,9 +321,9 @@ describe('metrics right_pane', () => {
         expect(el.query(By.css('mat-slider'))).toBeTruthy();
         expect(el.query(By.css('button'))).toBeTruthy();
 
-        expect(
-          getMatLegacySliderValue(select(fixture, CARD_WIDTH_SLIDER))
-        ).toBe(TEST_ONLY.MIN_CARD_WIDTH_SLIDER_VALUE.toString());
+        expect(getMatSliderValue(select(fixture, CARD_WIDTH_SLIDER))).toBe(
+          TEST_ONLY.MIN_CARD_WIDTH_SLIDER_VALUE.toString()
+        );
       });
 
       it('dispatches metricsChangeCardWidth action when adjusting the slider', fakeAsync(() => {
@@ -358,9 +356,9 @@ describe('metrics right_pane', () => {
         const fixture = TestBed.createComponent(SettingsViewContainer);
         fixture.detectChanges();
 
-        expect(
-          getMatLegacySliderValue(select(fixture, CARD_WIDTH_SLIDER))
-        ).toBe('400');
+        expect(getMatSliderValue(select(fixture, CARD_WIDTH_SLIDER))).toBe(
+          '400'
+        );
       });
 
       it('does not set invalid value', () => {
@@ -368,9 +366,9 @@ describe('metrics right_pane', () => {
         let fixture = TestBed.createComponent(SettingsViewContainer);
         fixture.detectChanges();
 
-        expect(
-          getMatLegacySliderValue(select(fixture, CARD_WIDTH_SLIDER))
-        ).toBe(TEST_ONLY.MIN_CARD_WIDTH_SLIDER_VALUE.toString());
+        expect(getMatSliderValue(select(fixture, CARD_WIDTH_SLIDER))).toBe(
+          TEST_ONLY.MIN_CARD_WIDTH_SLIDER_VALUE.toString()
+        );
       });
     });
 
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts
index 6b090204d6..b17aa03896 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts
@@ -21,7 +21,7 @@ import {
   OnDestroy,
   Output,
 } from '@angular/core';
-import {MatLegacyTabChangeEvent} from '@angular/material/legacy-tabs';
+import {MatTabChangeEvent} from '@angular/material/tabs';
 import {
   ColumnHeader,
   ColumnHeaderType,
@@ -92,7 +92,7 @@ export class ScalarColumnEditorComponent implements OnDestroy {
     );
   }
 
-  tabChange(event: MatLegacyTabChangeEvent) {
+  tabChange(event: MatTabChangeEvent) {
     const newMode =
       event.index === 0 ? DataTableMode.SINGLE : DataTableMode.RANGE;
     this.onTabChange.emit(newMode);
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_module.ts b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_module.ts
index 28a0aa656a..508214d03d 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_module.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_module.ts
@@ -14,10 +14,10 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatButtonModule} from '@angular/material/button';
 import {ScalarColumnEditorComponent} from './scalar_column_editor_component';
 import {ScalarColumnEditorContainer} from './scalar_column_editor_container';
 import {DataTableHeaderModule} from '../../../../widgets/data_table/data_table_header_module';
@@ -28,10 +28,10 @@ import {DataTableHeaderModule} from '../../../../widgets/data_table/data_table_h
   imports: [
     CommonModule,
     DataTableHeaderModule,
-    MatLegacyCheckboxModule,
-    MatLegacyTabsModule,
+    MatCheckboxModule,
+    MatTabsModule,
     MatIconModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
   ],
 })
 export class ScalarColumnEditorModule {}
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_test.ts b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_test.ts
index 1714e891b4..6731d9aa6a 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_test.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_test.ts
@@ -14,6 +14,7 @@ limitations under the License.
 ==============================================================================*/
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {
   ComponentFixture,
   fakeAsync,
@@ -42,7 +43,7 @@ import {
 import {DataTableHeaderModule} from '../../../../widgets/data_table/data_table_header_module';
 import {ScalarColumnEditorComponent} from './scalar_column_editor_component';
 import {ScalarColumnEditorContainer} from './scalar_column_editor_container';
-import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
+import {MatTabsModule} from '@angular/material/tabs';
 
 describe('scalar column editor', () => {
   let store: MockStore<State>;
@@ -60,7 +61,7 @@ describe('scalar column editor', () => {
     let index = mode === DataTableMode.SINGLE ? 0 : 1;
     // Get mat-tab to queue the task of switching tabs
     fixture.debugElement
-      .queryAll(By.css('.mat-tab-label'))
+      .queryAll(By.css('.mat-mdc-tab'))
       [index].nativeElement.click();
     fixture.detectChanges();
 
@@ -74,8 +75,9 @@ describe('scalar column editor', () => {
     await TestBed.configureTestingModule({
       imports: [
         DataTableHeaderModule,
-        MatLegacyTabsModule,
+        MatTabsModule,
         NoopAnimationsModule,
+        MatCheckboxModule,
       ],
       declarations: [ScalarColumnEditorContainer, ScalarColumnEditorComponent],
       providers: [provideMockStore()],
@@ -172,9 +174,15 @@ describe('scalar column editor', () => {
 
     expect(checkboxes.length).toEqual(2);
     expect(checkboxes[0].nativeElement.innerText).toEqual('Run');
-    expect(checkboxes[0].nativeElement.checked).toBeTrue();
+    expect(
+      checkboxes[0].nativeElement.attributes.getNamedItem('ng-reflect-checked')
+        .value
+    ).toEqual('true');
     expect(checkboxes[1].nativeElement.innerText).toEqual('Value');
-    expect(checkboxes[1].nativeElement.checked).toBeFalse();
+    expect(
+      checkboxes[1].nativeElement.attributes.getNamedItem('ng-reflect-checked')
+        .value
+    ).toEqual('false');
   }));
 
   describe('toggling', () => {
@@ -511,13 +519,13 @@ describe('scalar column editor', () => {
     it('update when global tableEditorSelectedTab changes', () => {
       const fixture = createComponent();
       fixture.detectChanges();
-      const tabs = fixture.debugElement.queryAll(By.css('.mat-tab-label'));
+      const tabs = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'));
 
       expect(
-        tabs[0].attributes['class']?.includes('mat-tab-label-active')
+        tabs[0].attributes['class']?.includes('mdc-tab--active')
       ).toBeTrue();
       expect(
-        tabs[1].attributes['class']?.includes('mat-tab-label-active')
+        tabs[1].attributes['class']?.includes('mdc-tab--active')
       ).toBeFalse();
 
       store.overrideSelector(getTableEditorSelectedTab, DataTableMode.RANGE);
@@ -525,10 +533,10 @@ describe('scalar column editor', () => {
       fixture.detectChanges();
 
       expect(
-        tabs[0].attributes['class']?.includes('mat-tab-label-active')
+        tabs[0].attributes['class']?.includes('mdc-tab--active')
       ).toBeFalse();
       expect(
-        tabs[1].attributes['class']?.includes('mat-tab-label-active')
+        tabs[1].attributes['class']?.includes('mdc-tab--active')
       ).toBeTrue();
     });
   });
diff --git a/tensorboard/webapp/notification_center/_views/notification_center_test.ts b/tensorboard/webapp/notification_center/_views/notification_center_test.ts
index 53c1b03ad6..c8277479e9 100644
--- a/tensorboard/webapp/notification_center/_views/notification_center_test.ts
+++ b/tensorboard/webapp/notification_center/_views/notification_center_test.ts
@@ -15,8 +15,8 @@ limitations under the License.
 import {CommonModule} from '@angular/common';
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+import {MatButtonModule} from '@angular/material/button';
+import {MatMenuModule} from '@angular/material/menu';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Action, Store} from '@ngrx/store';
@@ -37,8 +37,8 @@ describe('notification center', () => {
     await TestBed.configureTestingModule({
       imports: [
         CommonModule,
-        MatLegacyButtonModule,
-        MatLegacyMenuModule,
+        MatButtonModule,
+        MatMenuModule,
         MatIconTestingModule,
         NoopAnimationsModule,
       ],
diff --git a/tensorboard/webapp/notification_center/_views/views_module.ts b/tensorboard/webapp/notification_center/_views/views_module.ts
index 5a1b185f2c..c5951e8671 100644
--- a/tensorboard/webapp/notification_center/_views/views_module.ts
+++ b/tensorboard/webapp/notification_center/_views/views_module.ts
@@ -14,9 +14,9 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+import {MatMenuModule} from '@angular/material/menu';
 import {MarkdownRendererModule} from '../../widgets/markdown_renderer/markdown_renderer_module';
 import {NotificationCenterComponent} from './notification_center_component';
 import {NotificationCenterContainer} from './notification_center_container';
@@ -29,9 +29,9 @@ import {NotificationCenterContainer} from './notification_center_container';
   exports: [NotificationCenterContainer],
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatIconModule,
-    MatLegacyMenuModule,
+    MatMenuModule,
     MarkdownRendererModule,
   ],
 })
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts
index 8272d01e25..d1d1d67e51 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts
@@ -21,7 +21,7 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import {MatLegacyDialogRef} from '@angular/material/legacy-dialog';
+import {MatDialogRef} from '@angular/material/dialog';
 import {Run} from '../../types';
 
 export interface ColorGroup {
@@ -48,7 +48,7 @@ export class RegexEditDialogComponent {
   regexStringInput!: ElementRef<HTMLInputElement>;
 
   constructor(
-    public readonly dialogRef: MatLegacyDialogRef<RegexEditDialogComponent>,
+    public readonly dialogRef: MatDialogRef<RegexEditDialogComponent>,
     private readonly hostElRef: ElementRef
   ) {}
 
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts
index 604cf5cc68..aaeb7631c0 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts
@@ -14,9 +14,9 @@ limitations under the License.
 ==============================================================================*/
 import {Component, Inject} from '@angular/core';
 import {
-  MatLegacyDialogRef,
-  MAT_LEGACY_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from '@angular/material/dialog';
 import {Store} from '@ngrx/store';
 import {combineLatest, defer, merge, Observable, Subject} from 'rxjs';
 import {
@@ -123,8 +123,8 @@ export class RegexEditDialogContainer {
 
   constructor(
     private readonly store: Store<State>,
-    public dialogRef: MatLegacyDialogRef<RegexEditDialogContainer>,
-    @Inject(MAT_LEGACY_DIALOG_DATA) data: {experimentIds: string[]}
+    public dialogRef: MatDialogRef<RegexEditDialogContainer>,
+    @Inject(MAT_DIALOG_DATA) data: {experimentIds: string[]}
   ) {
     this.experimentIds = data.experimentIds;
 
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_test.ts b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_test.ts
index 329acc261d..207b206ed4 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_test.ts
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_test.ts
@@ -20,12 +20,12 @@ import {
   tick,
 } from '@angular/core/testing';
 import {
-  MatLegacyDialogModule,
-  MatLegacyDialogRef,
-  MAT_LEGACY_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+  MatDialogModule,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from '@angular/material/dialog';
+import {MatInputModule} from '@angular/material/input';
+import {MatMenuModule} from '@angular/material/menu';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Action, Store} from '@ngrx/store';
@@ -54,20 +54,20 @@ describe('regex_edit_dialog', () => {
   let actualActions: Action[];
   let dispatchSpy: jasmine.Spy;
   let store: MockStore<State>;
-  const matDialogRefSpy = jasmine.createSpyObj('MatLegacyDialogRef', ['close']);
+  const matDialogRefSpy = jasmine.createSpyObj('MatDialogRef', ['close']);
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        MatLegacyMenuModule,
-        MatLegacyInputModule,
-        MatLegacyDialogModule,
+        MatMenuModule,
+        MatInputModule,
+        MatDialogModule,
         NoopAnimationsModule,
       ],
       declarations: [RegexEditDialogComponent, RegexEditDialogContainer],
       providers: [
         provideMockTbStore(),
-        {provide: MatLegacyDialogRef, useValue: matDialogRefSpy},
+        {provide: MatDialogRef, useValue: matDialogRefSpy},
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
@@ -78,7 +78,7 @@ describe('regex_edit_dialog', () => {
   });
 
   function createComponent(experimentIds: string[]) {
-    TestBed.overrideProvider(MAT_LEGACY_DIALOG_DATA, {
+    TestBed.overrideProvider(MAT_DIALOG_DATA, {
       useValue: {experimentIds},
     });
 
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts b/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
index 1191a5c08a..44038e377e 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts
@@ -18,7 +18,7 @@ import {TestBed} from '@angular/core/testing';
 import {RunsDataTable} from './runs_data_table';
 import {DataTableModule} from '../../../widgets/data_table/data_table_module';
 import {MatIconTestingModule} from '../../../testing/mat_icon_module';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {
   SortingOrder,
   SortingInfo,
@@ -126,7 +126,7 @@ describe('runs_data_table', () => {
         DataTableModule,
         FilterInputModule,
         MatIconTestingModule,
-        MatLegacyCheckboxModule,
+        MatCheckboxModule,
       ],
       declarations: [TestableComponent, RunsDataTable],
       schemas: [NO_ERRORS_SCHEMA],
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts
index 9e37ea70d7..c3fc716437 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts
@@ -19,7 +19,7 @@ import {
   Input,
   Output,
 } from '@angular/core';
-import {MatLegacyDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {GroupBy, GroupByKey} from '../../types';
 import {RegexEditDialogContainer} from './regex_edit_dialog_container';
 
@@ -40,7 +40,7 @@ export class RunsGroupMenuButtonComponent {
   @Output()
   onGroupByChange = new EventEmitter<GroupBy>();
 
-  constructor(private readonly dialog: MatLegacyDialog) {}
+  constructor(private readonly dialog: MatDialog) {}
 
   onRegexStringEdit() {
     // data pass in the experiment id
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_table_component.ts b/tensorboard/webapp/runs/views/runs_table/runs_table_component.ts
index 3a84927aa2..232d5f17fc 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_table_component.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_table_component.ts
@@ -23,12 +23,9 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import {
-  MatLegacyPaginator,
-  MatLegacyPaginatorIntl,
-} from '@angular/material/legacy-paginator';
+import {MatPaginator, MatPaginatorIntl} from '@angular/material/paginator';
 import {MatSort, Sort} from '@angular/material/sort';
-import {MatLegacyTableDataSource} from '@angular/material/legacy-table';
+import {MatTableDataSource} from '@angular/material/table';
 import {
   DiscreteFilter,
   DiscreteHparamValue,
@@ -44,7 +41,7 @@ import {HparamSpec, MetricSpec, RunsTableColumn, RunTableItem} from './types';
  * Exported because Angular compiler requires decorated classes to be exported.
  */
 @Injectable()
-export class RunsPaginatorIntl extends MatLegacyPaginatorIntl {
+export class RunsPaginatorIntl extends MatPaginatorIntl {
   override itemsPerPageLabel = 'Show runs:';
 }
 
@@ -76,10 +73,10 @@ export interface IntervalFilterChange {
   styleUrls: ['runs_table_component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   // Use Element Provider since this text is unique to this element hierarchy.
-  providers: [{provide: MatLegacyPaginatorIntl, useClass: RunsPaginatorIntl}],
+  providers: [{provide: MatPaginatorIntl, useClass: RunsPaginatorIntl}],
 })
 export class RunsTableComponent implements OnChanges {
-  readonly dataSource = new MatLegacyTableDataSource<RunTableItem>();
+  readonly dataSource = new MatTableDataSource<RunTableItem>();
   readonly DomainType = DomainType;
   readonly RunsTableColumn = RunsTableColumn;
   readonly SortType = SortType;
@@ -137,7 +134,7 @@ export class RunsTableComponent implements OnChanges {
   @ViewChild('filter', {static: true, read: ElementRef})
   filter!: ElementRef<HTMLInputElement>;
 
-  @ViewChild(MatLegacyPaginator, {static: true}) paginator!: MatLegacyPaginator;
+  @ViewChild(MatPaginator, {static: true}) paginator!: MatPaginator;
   @ViewChild(MatSort, {static: true}) sort!: MatSort;
 
   ngOnChanges() {
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_table_module.ts b/tensorboard/webapp/runs/views/runs_table/runs_table_module.ts
index 1f03baab1e..2385048b97 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_table_module.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_table_module.ts
@@ -18,17 +18,17 @@ limitations under the License.
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
-import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatInputModule} from '@angular/material/input';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSortModule} from '@angular/material/sort';
-import {MatLegacyTableModule} from '@angular/material/legacy-table';
+import {MatTableModule} from '@angular/material/table';
 import {ColorPickerModule} from 'ngx-color-picker';
 import {AlertModule} from '../../../alert/alert_module';
 import {DataTableModule} from '../../../widgets/data_table/data_table_module';
@@ -50,17 +50,17 @@ import {RunsTableContainer} from './runs_table_container';
     DataTableModule,
     ExperimentAliasModule,
     FilterInputModule,
-    MatLegacyFormFieldModule,
-    MatLegacyButtonModule,
-    MatLegacyCheckboxModule,
-    MatLegacyDialogModule,
-    MatLegacyInputModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatInputModule,
     MatIconModule,
-    MatLegacyMenuModule,
-    MatLegacyPaginatorModule,
-    MatLegacyProgressSpinnerModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
     MatSortModule,
-    MatLegacyTableModule,
+    MatTableModule,
     RangeInputModule,
     AlertModule,
   ],
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_table_test.ts b/tensorboard/webapp/runs/views/runs_table/runs_table_test.ts
index db3f3307ab..bcba0e5f86 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_table_test.ts
+++ b/tensorboard/webapp/runs/views/runs_table/runs_table_test.ts
@@ -27,13 +27,13 @@ import {
   flushMicrotasks,
   TestBed,
 } from '@angular/core/testing';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
-import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSortModule} from '@angular/material/sort';
-import {MatLegacyTableModule} from '@angular/material/legacy-table';
+import {MatTableModule} from '@angular/material/table';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Action, Store} from '@ngrx/store';
@@ -238,14 +238,14 @@ describe('runs_table', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        MatLegacyCheckboxModule,
-        MatLegacyDialogModule,
+        MatCheckboxModule,
+        MatDialogModule,
         MatIconTestingModule,
-        MatLegacyMenuModule,
-        MatLegacyPaginatorModule,
-        MatLegacyProgressSpinnerModule,
+        MatMenuModule,
+        MatPaginatorModule,
+        MatProgressSpinnerModule,
         MatSortModule,
-        MatLegacyTableModule,
+        MatTableModule,
         NoopAnimationsModule,
         FilterInputModule,
         RangeInputModule,
@@ -1053,7 +1053,7 @@ describe('runs_table', () => {
       fixture.detectChanges();
 
       const label = fixture.debugElement.query(
-        By.css('.mat-paginator-page-size-label')
+        By.css('.mat-mdc-paginator-page-size-label')
       );
       expect(label.nativeElement.textContent).toContain('Show runs:');
     });
@@ -1177,7 +1177,7 @@ describe('runs_table', () => {
       updateTableAndPaginator(fixture);
 
       const label = fixture.nativeElement.querySelector(
-        '.mat-paginator-range-label'
+        '.mat-mdc-paginator-range-label'
       );
       // By default, mat-paginator take the lowest pageSizeOptions.
       expect(label.textContent).toContain('6 – 10 of 10');
@@ -1733,7 +1733,9 @@ describe('runs_table', () => {
         Selector.HEADER_CHECKBOX
       );
 
-      expect(checkbox.classList.contains('mat-checkbox-checked')).toBe(true);
+      expect(checkbox.attributes.getNamedItem('ng-reflect-checked').value).toBe(
+        'true'
+      );
     });
 
     it(
@@ -1769,9 +1771,9 @@ describe('runs_table', () => {
           Selector.HEADER_CHECKBOX
         );
 
-        expect(checkbox.classList.contains('mat-checkbox-indeterminate')).toBe(
-          true
-        );
+        expect(
+          checkbox.attributes.getNamedItem('ng-reflect-indeterminate').value
+        ).toBe('true');
       }
     );
 
diff --git a/tensorboard/webapp/settings/_views/settings_button_component.ts b/tensorboard/webapp/settings/_views/settings_button_component.ts
index 2b6d9a6136..f403b2cc27 100644
--- a/tensorboard/webapp/settings/_views/settings_button_component.ts
+++ b/tensorboard/webapp/settings/_views/settings_button_component.ts
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {Component, Input} from '@angular/core';
-import {MatLegacyDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {DataLoadState} from '../../types/data';
 import {SettingsDialogContainer} from './settings_dialog_container';
 
@@ -32,7 +32,7 @@ import {SettingsDialogContainer} from './settings_dialog_container';
 export class SettingsButtonComponent {
   @Input() settingsLoadState!: DataLoadState;
 
-  constructor(private dialog: MatLegacyDialog) {}
+  constructor(private dialog: MatDialog) {}
 
   isButtonDisabled() {
     // Button is disabled if we have not yet attempted to start
diff --git a/tensorboard/webapp/settings/_views/settings_module.ts b/tensorboard/webapp/settings/_views/settings_module.ts
index 21be7a1f51..3f4119d57d 100644
--- a/tensorboard/webapp/settings/_views/settings_module.ts
+++ b/tensorboard/webapp/settings/_views/settings_module.ts
@@ -15,11 +15,11 @@ limitations under the License.
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatInputModule} from '@angular/material/input';
 import {SettingsPolymerInteropContainer} from './polymer_interop_container';
 import {SettingsButtonComponent} from './settings_button_component';
 import {SettingsButtonContainer} from './settings_button_container';
@@ -45,11 +45,11 @@ import {SettingsDialogContainer} from './settings_dialog_container';
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    MatLegacyButtonModule,
-    MatLegacyCheckboxModule,
-    MatLegacyDialogModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDialogModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
   ],
 })
 export class SettingsModule {}
diff --git a/tensorboard/webapp/settings/_views/settings_test.ts b/tensorboard/webapp/settings/_views/settings_test.ts
index 5d0d362d90..c1c24f5e97 100644
--- a/tensorboard/webapp/settings/_views/settings_test.ts
+++ b/tensorboard/webapp/settings/_views/settings_test.ts
@@ -15,10 +15,10 @@ limitations under the License.
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatInputModule} from '@angular/material/input';
 import {By} from '@angular/platform-browser';
 import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -46,11 +46,11 @@ describe('settings test', () => {
     await TestBed.configureTestingModule({
       imports: [
         FormsModule,
-        MatLegacyButtonModule,
-        MatLegacyCheckboxModule,
-        MatLegacyDialogModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDialogModule,
         MatIconTestingModule,
-        MatLegacyInputModule,
+        MatInputModule,
         NoopAnimationsModule,
         ReactiveFormsModule,
       ],
diff --git a/tensorboard/webapp/testing/dom.ts b/tensorboard/webapp/testing/dom.ts
index 3feb281e9e..785283173a 100644
--- a/tensorboard/webapp/testing/dom.ts
+++ b/tensorboard/webapp/testing/dom.ts
@@ -35,6 +35,7 @@ export interface SendKeySpecialArg {
     | 'Tab'
     | 'Enter'
     | 'ArrowLeft'
+    | 'ArrowUp'
     | 'ArrowRight'
     | 'Escape';
   prevString: string;
@@ -88,6 +89,12 @@ export function sendKey<T>(
       keyCode = 0x25;
       emitKeyPressAndInput = false;
       break;
+    case 'ArrowUp':
+      nextString = prevString;
+      nextCursorIndex = startingCursorIndex - 1;
+      keyCode = 0x26;
+      emitKeyPressAndInput = false;
+      break;
     case 'ArrowRight':
       nextString = prevString;
       nextCursorIndex = startingCursorIndex + 1;
diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index dd586514f9..88273f2893 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -263,8 +263,9 @@ $tb-dark-theme: map_merge(
 // Apply themed style for the global stylesheet (styles.scss).
 @mixin tb-global-themed-styles() {
   @include mat.core();
-  @include mat.all-legacy-component-typographies();
+  @include mat.all-component-typographies();
   // Include all theme-styles for the components based on the current theme.
+  @include mat.all-component-themes($tb-theme);
   @include mat.all-legacy-component-themes($tb-theme);
 
   body {
@@ -299,6 +300,7 @@ $tb-dark-theme: map_merge(
       }
     }
 
+    @include mat.all-component-themes($tb-dark-theme);
     @include mat.all-legacy-component-themes($tb-dark-theme);
   }
 }
diff --git a/tensorboard/webapp/widgets/data_table/column_selector_module.ts b/tensorboard/webapp/widgets/data_table/column_selector_module.ts
index adef9b315b..75d27d0265 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_module.ts
+++ b/tensorboard/webapp/widgets/data_table/column_selector_module.ts
@@ -16,8 +16,8 @@ limitations under the License.
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatInputModule} from '@angular/material/input';
+import {MatButtonModule} from '@angular/material/button';
 import {ColumnSelectorComponent} from './column_selector_component';
 import {FormsModule} from '@angular/forms';
 
@@ -26,8 +26,8 @@ import {FormsModule} from '@angular/forms';
   imports: [
     CommonModule,
     MatIconModule,
-    MatLegacyInputModule,
-    MatLegacyButtonModule,
+    MatInputModule,
+    MatButtonModule,
     FormsModule,
   ],
   exports: [ColumnSelectorComponent],
diff --git a/tensorboard/webapp/widgets/data_table/data_table_module.ts b/tensorboard/webapp/widgets/data_table/data_table_module.ts
index 0645133e65..f89c5056ba 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_module.ts
+++ b/tensorboard/webapp/widgets/data_table/data_table_module.ts
@@ -23,7 +23,7 @@ import {ContentCellComponent} from './content_cell_component';
 import {ContentRowComponent} from './content_row_component';
 import {ColumnSelectorModule} from './column_selector_module';
 import {CustomModalModule} from '../custom_modal/custom_modal_module';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 
 @NgModule({
   declarations: [
@@ -41,7 +41,7 @@ import {MatLegacyButtonModule} from '@angular/material/legacy-button';
   imports: [
     CommonModule,
     MatIconModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     DataTableHeaderModule,
     CustomModalModule,
     ColumnSelectorModule,
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_module.ts b/tensorboard/webapp/widgets/dropdown/dropdown_module.ts
index e3aa8ca2d2..3e5e3236c3 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_module.ts
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_module.ts
@@ -14,12 +14,12 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {DropdownComponent} from './dropdown_component';
 
 @NgModule({
   declarations: [DropdownComponent],
   exports: [DropdownComponent],
-  imports: [CommonModule, MatLegacySelectModule],
+  imports: [CommonModule, MatSelectModule],
 })
 export class DropdownModule {}
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_test.ts b/tensorboard/webapp/widgets/dropdown/dropdown_test.ts
index 8b698b9982..9f7e599aee 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_test.ts
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_test.ts
@@ -15,8 +15,8 @@ limitations under the License.
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component, Input} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
-import {MatLegacySelectHarness} from '@angular/material/legacy-select/testing';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSelectHarness} from '@angular/material/select/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {DropdownComponent, DropdownOption} from './dropdown_component';
@@ -50,7 +50,7 @@ describe('tb-dropdown', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacySelectModule, NoopAnimationsModule],
+      imports: [MatSelectModule, NoopAnimationsModule],
       declarations: [DropdownComponent, TestableComponent],
     }).compileComponents();
   });
@@ -99,7 +99,7 @@ describe('tb-dropdown', () => {
     ]);
 
     // Test DOM content.
-    const selectHarness = await loader.getHarness(MatLegacySelectHarness);
+    const selectHarness = await loader.getHarness(MatSelectHarness);
     await selectHarness.open();
 
     const options = await selectHarness.getOptions();
@@ -137,7 +137,7 @@ describe('tb-dropdown', () => {
     ]);
 
     // Test DOM content.
-    const selectHarness = await loader.getHarness(MatLegacySelectHarness);
+    const selectHarness = await loader.getHarness(MatSelectHarness);
     await selectHarness.open();
 
     const options = await selectHarness.getOptions();
diff --git a/tensorboard/webapp/widgets/filter_input/filter_input_component.ts b/tensorboard/webapp/widgets/filter_input/filter_input_component.ts
index 109e4db723..8343ee46b4 100644
--- a/tensorboard/webapp/widgets/filter_input/filter_input_component.ts
+++ b/tensorboard/webapp/widgets/filter_input/filter_input_component.ts
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {Component, Input, ViewChild} from '@angular/core';
-import {MatLegacyAutocompleteTrigger} from '@angular/material/legacy-autocomplete';
+import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
 
 /**
  * A text input field intended for filtering items.
@@ -42,8 +42,8 @@ export class FilterInputComponent {
   @Input() matAutocomplete?: string;
   @Input() placeholder: string = '';
 
-  @ViewChild(MatLegacyAutocompleteTrigger)
-  private readonly autocompleteTrigger!: MatLegacyAutocompleteTrigger;
+  @ViewChild(MatAutocompleteTrigger)
+  private readonly autocompleteTrigger!: MatAutocompleteTrigger;
 
   onInputKeyUp(event: KeyboardEvent) {
     if (event.key === 'Enter') {
diff --git a/tensorboard/webapp/widgets/filter_input/filter_input_module.ts b/tensorboard/webapp/widgets/filter_input/filter_input_module.ts
index 03ff7ebcaf..c5d9252703 100644
--- a/tensorboard/webapp/widgets/filter_input/filter_input_module.ts
+++ b/tensorboard/webapp/widgets/filter_input/filter_input_module.ts
@@ -14,13 +14,13 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatIconModule} from '@angular/material/icon';
 import {FilterInputComponent} from './filter_input_component';
 
 @NgModule({
   declarations: [FilterInputComponent],
   exports: [FilterInputComponent],
-  imports: [CommonModule, MatLegacyAutocompleteModule, MatIconModule],
+  imports: [CommonModule, MatAutocompleteModule, MatIconModule],
 })
 export class FilterInputModule {}
diff --git a/tensorboard/webapp/widgets/filter_input/filter_input_test.ts b/tensorboard/webapp/widgets/filter_input/filter_input_test.ts
index 29060a5432..8b811c0b63 100644
--- a/tensorboard/webapp/widgets/filter_input/filter_input_test.ts
+++ b/tensorboard/webapp/widgets/filter_input/filter_input_test.ts
@@ -14,8 +14,8 @@ limitations under the License.
 ==============================================================================*/
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {Component, Input} from '@angular/core';
-import {TestBed} from '@angular/core/testing';
-import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete';
+import {TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {KeyType, sendKey} from '../../testing/dom';
@@ -59,7 +59,7 @@ describe('filter input widget', () => {
     await TestBed.configureTestingModule({
       imports: [
         NoopAnimationsModule,
-        MatLegacyAutocompleteModule,
+        MatAutocompleteModule,
         MatIconTestingModule,
         FilterInputModule,
       ],
@@ -98,7 +98,7 @@ describe('filter input widget', () => {
     expect(isAutocompleteDisabled || !hasAutocomplete).toBe(true);
   });
 
-  it('shows autocomplete and closes on Enter', () => {
+  it('shows autocomplete and closes on Enter', fakeAsync(() => {
     const fixture = TestBed.createComponent(TestableInputWithCompletions);
     fixture.componentInstance.completions = ['a', 'b', 'c'];
     fixture.detectChanges();
@@ -116,8 +116,9 @@ describe('filter input widget', () => {
       key: 'Enter',
       startingCursorIndex: input.properties['selectionStart'],
     });
+    tick();
 
     const options2 = getAutocompleteOptions(overlayContainer);
     expect(options2.length).toBe(0);
-  });
+  }));
 });
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts
index 74a9999d7d..8217ab00d7 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts
@@ -17,10 +17,10 @@ import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {CommonModule} from '@angular/common';
 import {Component, DebugElement, Input} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
-import {MatLegacyMenuHarness} from '@angular/material/legacy-menu/testing';
+import {MatButtonModule} from '@angular/material/button';
+import {MatInputModule} from '@angular/material/input';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatMenuHarness} from '@angular/material/menu/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatIconTestingModule} from '../../../testing/mat_icon_module';
@@ -87,10 +87,10 @@ describe('line_chart_v2/sub_view/axis test', () => {
       declarations: [TestableComponent, LineChartAxisComponent],
       imports: [
         CommonModule,
-        MatLegacyButtonModule,
+        MatButtonModule,
         MatIconTestingModule,
-        MatLegacyInputModule,
-        MatLegacyMenuModule,
+        MatInputModule,
+        MatMenuModule,
         NoopAnimationsModule,
         OverlayModule,
       ],
@@ -381,7 +381,7 @@ describe('line_chart_v2/sub_view/axis test', () => {
       fixture.detectChanges();
       const overlay = setMinMax(fixture, '100', '1');
 
-      const menuTesting = await loader.getHarness(MatLegacyMenuHarness);
+      const menuTesting = await loader.getHarness(MatMenuHarness);
       await menuTesting.close();
 
       expect(overlay.querySelectorAll(EditorSelector.INPUT).length).toBe(0);
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts
index c63b7d2eb4..94d3ccce2b 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts
@@ -15,10 +15,10 @@ limitations under the License.
 import {OverlayModule} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+import {MatInputModule} from '@angular/material/input';
+import {MatMenuModule} from '@angular/material/menu';
 import {LineChartAxisComponent} from './line_chart_axis_view';
 import {LineChartGridView} from './line_chart_grid_view';
 import {LineChartInteractiveViewComponent} from './line_chart_interactive_view';
@@ -42,10 +42,10 @@ import {LineChartInteractiveViewComponent} from './line_chart_interactive_view';
   imports: [
     CommonModule,
     OverlayModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatIconModule,
-    MatLegacyInputModule,
-    MatLegacyMenuModule,
+    MatInputModule,
+    MatMenuModule,
   ],
 })
 export class SubViewModule {}
diff --git a/tensorboard/webapp/widgets/range_input/range_input_test.ts b/tensorboard/webapp/widgets/range_input/range_input_test.ts
index ddd94ce940..e7365300ed 100644
--- a/tensorboard/webapp/widgets/range_input/range_input_test.ts
+++ b/tensorboard/webapp/widgets/range_input/range_input_test.ts
@@ -127,7 +127,7 @@ describe('range input test', () => {
     return input.map((inputDebugElement) => inputDebugElement.nativeElement);
   }
 
-  function getMatLegacySliderValue(el: DebugElement): string {
+  function getMatSliderValue(el: DebugElement): string {
     return el.query(By.css('.mat-slider-thumb-label-text')).nativeElement
       .textContent;
   }
@@ -150,7 +150,7 @@ describe('range input test', () => {
     describe('single selection', () => {
       it('renders correct slider value', () => {
         const {fixture} = createComponent({lowerValue: 2});
-        expect(getMatLegacySliderValue(fixture.debugElement)).toEqual('2');
+        expect(getMatSliderValue(fixture.debugElement)).toEqual('2');
       });
     });