From 9c25f00db91c7893b266bfbf259045c2f0c9b38a Mon Sep 17 00:00:00 2001
From: James <j.c.hollyer@gmail.com>
Date: Thu, 12 Oct 2023 08:50:53 -0700
Subject: [PATCH] MDC Migration: Merging feature branch with all new Angular
 Components Styled as desired. (#6631)

Contributors: @rileyajones, @bmd3k, @JamesHollyer
## Motivation for features / changes
Angular is deprecating the "Legacy" Material Components. We are
migrating to the new MDC Components. This was done in a feature branch.
This PR merges the feature branch into master with all components except
for the mat-slider converted and styled properly.

## Technical description of changes
This was all done in a feature branch for commit history please see that
branch here: https://github.com/tensorflow/tensorboard/tree/MDCMigration

## Screenshots of UI changes (or N/A)
Here is one basic screenshot of what a TensorBoard looks like now. For
more detailed screenshots please see commit history with above link.
![Screenshot 2023-10-10 at 1 50 06
PM](https://github.com/tensorflow/tensorboard/assets/8672809/add132b1-5bfd-4ab9-9ac9-f135114df518)

---------

Co-authored-by: Riley Jones <78179109+rileyajones@users.noreply.github.com>
Co-authored-by: Brian Dubois <bdubois@google.com>
---
 .../views/timeline/BUILD                      |   2 +-
 .../views/timeline/timeline_module.ts         |   4 +-
 tensorboard/webapp/alert/views/BUILD          |   8 +-
 .../alert_display_snackbar_container.scss     |   3 +-
 .../views/alert_display_snackbar_container.ts |   9 +-
 .../alert/views/alert_snackbar_container.ts   |   4 +-
 .../alert/views/alert_snackbar_module.ts      |   6 +-
 .../webapp/alert/views/alert_snackbar_test.ts |  17 +--
 tensorboard/webapp/angular/BUILD              |  47 +++----
 tensorboard/webapp/core/views/BUILD           |   2 +-
 .../webapp/core/views/layout_module.ts        |   4 +-
 tensorboard/webapp/feature_flag/views/BUILD   |  10 +-
 .../views/feature_flag_dialog_module.ts       |   6 +-
 .../feature_flag_modal_trigger_container.ts   |   9 +-
 ...ature_flag_modal_trigger_container_test.ts |   8 +-
 tensorboard/webapp/header/BUILD               |  16 +--
 .../webapp/header/dark_mode_toggle_test.ts    |   8 +-
 tensorboard/webapp/header/header_module.ts    |  16 +--
 tensorboard/webapp/header/header_test.ts      |  16 +--
 .../header/plugin_selector_component.ng.html  |   8 +-
 .../header/plugin_selector_component.scss     | 116 ++++++++++--------
 .../header/plugin_selector_component.ts       |   4 +-
 .../webapp/metrics/views/card_renderer/BUILD  |  36 +++---
 .../data_download_dialog_container.ts         |   4 +-
 .../data_download_dialog_test.ts              |   4 +-
 .../card_renderer/data_download_module.ts     |  16 +--
 .../histogram_card_component.ng.html          |   1 -
 .../histogram_card_component.scss             |   4 -
 .../card_renderer/histogram_card_module.ts    |   8 +-
 .../card_renderer/histogram_card_test.ts      |   4 +-
 .../image_card_component.ng.html              |   1 -
 .../card_renderer/image_card_component.scss   |   4 -
 .../views/card_renderer/image_card_module.ts  |   8 +-
 .../views/card_renderer/image_card_test.ts    |   8 +-
 .../scalar_card_component.ng.html             |   1 -
 .../card_renderer/scalar_card_component.scss  |   4 -
 .../card_renderer/scalar_card_component.ts    |   7 +-
 .../card_renderer/scalar_card_data_table.scss |   5 +
 .../views/card_renderer/scalar_card_module.ts |  12 +-
 .../views/card_renderer/scalar_card_test.ts   |  17 ++-
 .../webapp/metrics/views/main_view/BUILD      |  12 +-
 .../views/main_view/filter_input_test.ts      |   8 +-
 .../views/main_view/main_view_module.ts       |  16 +--
 .../webapp/metrics/views/right_pane/BUILD     |  10 +-
 .../views/right_pane/right_pane_module.ts     |  12 +-
 .../views/right_pane/right_pane_test.ts       |  36 +++---
 .../right_pane/scalar_column_editor/BUILD     |   7 +-
 .../scalar_column_editor_component.ng.html    |  30 +++--
 .../scalar_column_editor_component.scss       |   7 +-
 .../scalar_column_editor_component.ts         |   4 +-
 .../scalar_column_editor_module.ts            |  12 +-
 .../scalar_column_editor_test.ts              |  28 +++--
 .../right_pane/settings_view_component.scss   |  26 ++--
 .../webapp/notification_center/_views/BUILD   |  10 +-
 .../_views/notification_center_test.ts        |   8 +-
 .../_views/views_module.ts                    |   8 +-
 .../webapp/runs/views/runs_table/BUILD        |  32 ++---
 .../runs_table/regex_edit_dialog.ng.html      |   1 +
 .../regex_edit_dialog_component.scss          |  19 ++-
 .../runs_table/regex_edit_dialog_component.ts |   4 +-
 .../runs_table/regex_edit_dialog_container.ts |   9 +-
 .../runs_table/regex_edit_dialog_test.ts      |  24 ++--
 .../views/runs_table/runs_data_table.scss     |   8 +-
 .../views/runs_table/runs_data_table_test.ts  |   4 +-
 .../runs_group_menu_button_component.ng.html  |  44 +++----
 .../runs_group_menu_button_component.scss     |   6 -
 .../runs_group_menu_button_component.ts       |   4 +-
 .../views/runs_table/runs_table_component.ts  |  15 +--
 .../views/runs_table/runs_table_module.ts     |  36 +++---
 .../runs/views/runs_table/runs_table_test.ts  |  43 ++++---
 tensorboard/webapp/settings/_views/BUILD      |  16 +--
 .../_views/settings_button_component.ts       |   4 +-
 .../_views/settings_dialog_component.css      |  13 +-
 .../_views/settings_dialog_component.ng.html  |   4 +-
 .../webapp/settings/_views/settings_module.ts |  16 +--
 .../webapp/settings/_views/settings_test.ts   |  16 +--
 tensorboard/webapp/testing/dom.ts             |   7 ++
 .../webapp/theme/_tb_theme.template.scss      |  38 +++++-
 tensorboard/webapp/widgets/data_table/BUILD   |   6 +-
 .../column_selector_component.ng.html         |   2 +-
 .../data_table/column_selector_component.scss |  14 +--
 .../data_table/column_selector_module.ts      |   8 +-
 .../data_table/content_cell_component.scss    |   2 +-
 .../data_table/data_table_component.ng.html   |  26 ++--
 .../data_table/data_table_component.scss      |   3 +-
 .../widgets/data_table/data_table_module.ts   |   4 +-
 .../data_table/header_cell_component.scss     |  24 ++--
 tensorboard/webapp/widgets/dropdown/BUILD     |   6 +-
 .../widgets/dropdown/dropdown_component.scss  |  28 +++--
 .../widgets/dropdown/dropdown_component.ts    |   1 +
 .../widgets/dropdown/dropdown_module.ts       |   4 +-
 .../webapp/widgets/dropdown/dropdown_test.ts  |  10 +-
 tensorboard/webapp/widgets/filter_input/BUILD |   4 +-
 .../filter_input/filter_input_component.ts    |   6 +-
 .../filter_input/filter_input_module.ts       |   4 +-
 .../widgets/filter_input/filter_input_test.ts |  11 +-
 .../widgets/line_chart_v2/sub_view/BUILD      |  14 +--
 .../sub_view/line_chart_axis_view.ng.html     |   2 +-
 .../sub_view/line_chart_axis_view.scss        |  29 ++---
 .../sub_view/line_chart_axis_view_test.ts     |  16 +--
 .../line_chart_v2/sub_view/sub_view_module.ts |  12 +-
 .../widgets/range_input/range_input_test.ts   |   4 +-
 102 files changed, 661 insertions(+), 643 deletions(-)

diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/BUILD b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/BUILD
index 9123b0529a..c998b03958 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/BUILD
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/BUILD
@@ -20,8 +20,8 @@ tf_ng_module(
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store:types",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
         "//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@ngrx/store",
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_module.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_module.ts
index e69fa2625b..097d7b018d 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_module.ts
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_module.ts
@@ -15,7 +15,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 {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {ExecutionDataModule} from '../execution_data/execution_data_module';
 import {TimelineComponent} from './timeline_component';
@@ -26,7 +26,7 @@ import {TimelineContainer} from './timeline_container';
   imports: [
     CommonModule,
     ExecutionDataModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatLegacySliderModule,
   ],
   // TODO(cais): The following two providers are meant to make the mat-slider
diff --git a/tensorboard/webapp/alert/views/BUILD b/tensorboard/webapp/alert/views/BUILD
index b8ec01fa2f..78e359b791 100644
--- a/tensorboard/webapp/alert/views/BUILD
+++ b/tensorboard/webapp/alert/views/BUILD
@@ -26,8 +26,8 @@ tf_ng_module(
         "//tensorboard/webapp/alert:types",
         "//tensorboard/webapp/alert/store",
         "//tensorboard/webapp/alert/store:types",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_snackbar",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_snackbar",
         "//tensorboard/webapp/util:string",
         "@npm//@angular/common",
         "@npm//@angular/core",
@@ -49,8 +49,8 @@ tf_ts_library(
         "//tensorboard/webapp/alert/store:testing",
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_snackbar",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_snackbar",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
         "@npm//@angular/core",
diff --git a/tensorboard/webapp/alert/views/alert_display_snackbar_container.scss b/tensorboard/webapp/alert/views/alert_display_snackbar_container.scss
index 4aed87692e..af111929ce 100644
--- a/tensorboard/webapp/alert/views/alert_display_snackbar_container.scss
+++ b/tensorboard/webapp/alert/views/alert_display_snackbar_container.scss
@@ -33,6 +33,7 @@ limitations under the License.
   margin-left: auto;
 }
 
-button {
+button.mat-mdc-button {
+  color: inherit;
   text-transform: uppercase;
 }
diff --git a/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts b/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
index 139e064b78..ee20963931 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/angular/BUILD b/tensorboard/webapp/angular/BUILD
index a769eb7382..5c710b161a 100644
--- a/tensorboard/webapp/angular/BUILD
+++ b/tensorboard/webapp/angular/BUILD
@@ -71,7 +71,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/autocomplete dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_autocomplete",
+    name = "expect_angular_material_autocomplete",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -87,15 +87,6 @@ tf_ts_library(
     ],
 )
 
-# This is a dummy rule used as a @angular/material/legacy_checkbox dependency.
-tf_ts_library(
-    name = "expect_angular_legacy_material_checkbox",
-    srcs = [],
-    deps = [
-        "@npm//@angular/material",
-    ],
-)
-
 # This is a dummy rule used as a @angular/material/checkbox/testing dependency.
 tf_ts_library(
     name = "expect_angular_material_checkbox_testing",
@@ -107,7 +98,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/button dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_button",
+    name = "expect_angular_material_button",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -125,7 +116,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/chips dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_chips",
+    name = "expect_angular_material_chips",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -134,7 +125,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/dialog dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_dialog",
+    name = "expect_angular_material_dialog",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -143,7 +134,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/dialog/testing dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_dialog_testing",
+    name = "expect_angular_material_dialog_testing",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -152,7 +143,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/expansion dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_expansion",
+    name = "expect_angular_material_expansion",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -161,7 +152,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/expansion dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_form_field",
+    name = "expect_angular_material_form_field",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -188,7 +179,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/input dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_input",
+    name = "expect_angular_material_input",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -197,7 +188,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/menu dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_menu",
+    name = "expect_angular_material_menu",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -206,7 +197,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/menu/testing dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_menu_testing",
+    name = "expect_angular_material_menu_testing",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -215,7 +206,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/paginator dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_paginator",
+    name = "expect_angular_material_paginator",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -224,7 +215,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/progress_spinner dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_progress_spinner",
+    name = "expect_angular_material_progress_spinner",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -233,7 +224,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/select dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_select",
+    name = "expect_angular_material_select",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -242,7 +233,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/select/testing dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_select_testing",
+    name = "expect_angular_material_select_testing",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -251,7 +242,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/slide_toggle dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_slide_toggle",
+    name = "expect_angular_material_slide_toggle",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -269,7 +260,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/snackbar dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_snackbar",
+    name = "expect_angular_material_snackbar",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -287,7 +278,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/table dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_table",
+    name = "expect_angular_material_table",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -296,7 +287,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/tabs dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_tabs",
+    name = "expect_angular_material_tabs",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -314,7 +305,7 @@ tf_ts_library(
 
 # This is a dummy rule used as a @angular/material/tooltip dependency.
 tf_ts_library(
-    name = "expect_angular_legacy_material_tooltip",
+    name = "expect_angular_material_tooltip",
     srcs = [],
     deps = [
         "@npm//@angular/material",
diff --git a/tensorboard/webapp/core/views/BUILD b/tensorboard/webapp/core/views/BUILD
index 5230e45c8a..511c16191b 100644
--- a/tensorboard/webapp/core/views/BUILD
+++ b/tensorboard/webapp/core/views/BUILD
@@ -17,7 +17,7 @@ tf_ng_module(
     ],
     assets = [":layout_styles"],
     deps = [
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
         "//tensorboard/webapp/core:state",
         "//tensorboard/webapp/core:types",
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/BUILD b/tensorboard/webapp/feature_flag/views/BUILD
index ea089c2fb1..d2c9a10f86 100644
--- a/tensorboard/webapp/feature_flag/views/BUILD
+++ b/tensorboard/webapp/feature_flag/views/BUILD
@@ -24,7 +24,7 @@ tf_ng_module(
         ":feature_flag_dialog",
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
         "//tensorboard/webapp/feature_flag/actions",
         "//tensorboard/webapp/feature_flag/store",
         "@npm//@angular/common",
@@ -48,8 +48,8 @@ tf_ng_module(
     ],
     deps = [
         "//tensorboard/webapp:app_state",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_select",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_select",
         "//tensorboard/webapp/feature_flag:types",
         "//tensorboard/webapp/feature_flag/actions",
         "//tensorboard/webapp/feature_flag/store",
@@ -76,8 +76,8 @@ tf_ng_module(
         "//tensorboard/webapp/angular:expect_angular_cdk_testing",
         "//tensorboard/webapp/angular:expect_angular_cdk_testing_testbed",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog_testing",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog_testing",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
         "//tensorboard/webapp/feature_flag:types",
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/BUILD b/tensorboard/webapp/header/BUILD
index 535a4b0fa8..5502ba956b 100644
--- a/tensorboard/webapp/header/BUILD
+++ b/tensorboard/webapp/header/BUILD
@@ -37,11 +37,11 @@ tf_ng_module(
     ],
     deps = [
         "//tensorboard/webapp:selectors",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_select",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_tabs",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
+        "//tensorboard/webapp/angular:expect_angular_material_select",
+        "//tensorboard/webapp/angular:expect_angular_material_tabs",
         "//tensorboard/webapp/angular:expect_angular_material_toolbar",
         "//tensorboard/webapp/core",
         "//tensorboard/webapp/core/actions",
@@ -70,10 +70,10 @@ tf_ts_library(
         "//tensorboard/webapp:selectors",
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_select",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_tabs",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
+        "//tensorboard/webapp/angular:expect_angular_material_select",
+        "//tensorboard/webapp/angular:expect_angular_material_tabs",
         "//tensorboard/webapp/angular:expect_angular_material_toolbar",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
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.ng.html b/tensorboard/webapp/header/plugin_selector_component.ng.html
index 3e2c3ac54d..8f61443f1a 100644
--- a/tensorboard/webapp/header/plugin_selector_component.ng.html
+++ b/tensorboard/webapp/header/plugin_selector_component.ng.html
@@ -15,6 +15,7 @@
 limitations under the License.
 -->
 <mat-tab-group
+  mat-stretch-tabs="false"
   class="active-plugin-list"
   [selectedIndex]="getActivePluginIndex()"
   animationDuration="100ms"
@@ -34,10 +35,15 @@
     </ng-template>
   </mat-tab>
 </mat-tab-group>
-<mat-form-field floatLabel="never" *ngIf="disabledPlugins.length > 0">
+<mat-form-field
+  floatLabel="never"
+  *ngIf="disabledPlugins.length > 0"
+  subscriptSizing="dynamic"
+>
   <mat-label>Inactive</mat-label>
   <mat-select
     [value]="selectedPlugin"
+    [hideSingleSelectionIndicator]="true"
     (selectionChange)="onDisabledPluginSelectionChanged($event)"
   >
     <mat-option
diff --git a/tensorboard/webapp/header/plugin_selector_component.scss b/tensorboard/webapp/header/plugin_selector_component.scss
index 8068e82301..9b18aea315 100644
--- a/tensorboard/webapp/header/plugin_selector_component.scss
+++ b/tensorboard/webapp/header/plugin_selector_component.scss
@@ -23,17 +23,40 @@ limitations under the License.
   overflow: hidden;
 }
 
-mat-form-field {
-  flex: 0 0;
-  /* visually center align with _text_ of the select to the center. */
-  margin-top: 5px;
-  /* default width is 180px */
-  width: 130px;
+:host mat-form-field ::ng-deep {
+  // Default width is calculated by the contents of the longest value in the
+  // select. We override both the trigger and panel widths to be a bit shorter
+  // than what we see in practice.
+  // TODO: In Angular 16+ use the panelWidth attribute to set the width of the
+  //       panel to be different than the trigger. (We would likely want the
+  //       trigger to be shorter and the panel to be longer).
+  width: 144px;
+
+  .mdc-text-field {
+    @include tb-theme-background-prop(background-color, app-bar);
+    // Default padding is "0 16px".
+    padding: 0 4px;
+  }
+
+  label.mdc-floating-label.mat-mdc-floating-label,
+  .mat-mdc-select,
+  .mat-mdc-select-value,
+  .mat-mdc-select-arrow {
+    // Inherit from `color` on the toolbar.
+    color: inherit;
+  }
+
+  .mdc-text-field--filled:not(.mdc-text-field--disabled)
+    .mdc-line-ripple::before {
+    // Inherit from `border-color` on the toolbar.
+    border-color: inherit;
+  }
 }
 
 mat-label,
 mat-select,
 mat-option {
+  font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
 }
@@ -53,83 +76,72 @@ mat-option {
   width: 100%;
 }
 
-// TODO(tensorboard-team): Can probably remove after migrating away from Legacy Material components.
-// These styles exist in `mat-toolbar` already, but the combination of the
-// dark theme selector being `body.dark-theme` and the legacy select component
-// being used causes the styles to be overwritten in a dark theme.
-:host ::ng-deep .mat-form-field.mat-form-field.mat-form-field {
-  .mat-form-field-underline,
-  .mat-form-field-ripple,
-  &.mat-focused .mat-form-field-ripple {
-    background-color: currentColor;
-  }
-
-  .mat-select-value,
-  .mat-select-arrow,
-  &.mat-focused .mat-form-field-label,
-  &.mat-focused .mat-select-arrow {
-    color: inherit;
-  }
-}
-
 :host ::ng-deep .active-plugin-list {
   // Override mat-tab styling. By default, mat-tab has the right styling but,
   // here, we are using it under dark header background. Must invert the color.
 
-  &.mat-primary .mat-tab-list .mat-ink-bar {
-    background-color: currentColor;
+  .mat-mdc-tab:not(.mat-mdc-tab-disabled)
+    .mdc-tab-indicator__content--underline {
+    border-color: currentColor;
   }
 
-  .mat-tab-label,
-  .mat-tab-link {
-    // Inherit from `color` on the toolbar.
-    color: inherit;
-    // default is .6 and it is too dark against dark background.
-    opacity: 0.7;
+  .mat-mdc-tab:not(.mat-mdc-tab-disabled) {
+    .mdc-tab__text-label {
+      // Inherit from `color` on the toolbar.
+      color: inherit;
+      // default is .6 and it is too dark against dark background.
+      opacity: 0.7;
+    }
 
-    &.mat-tab-label-active {
+    &.mdc-tab--active .mdc-tab__text-label {
+      // Repeat color with more-specific selector to override dark-mode styling.
+      // Inherit from `color` on the toolbar.
+      color: inherit;
       opacity: 1;
     }
   }
 
-  .mat-tab-header-pagination-chevron {
+  .mat-mdc-tab-header-pagination {
+    color: inherit;
+  }
+
+  .mat-mdc-tab-header-pagination-chevron {
     border-color: currentColor;
   }
 
-  .mat-tab-header-pagination-disabled {
+  .mat-mdc-tab-header-pagination-disabled {
     visibility: hidden;
   }
 
-  .mat-tab-disabled {
+  .mat-mdc-tab-disabled {
     display: none;
   }
 
-  mat-tab-list,
-  .mat-tab-header,
-  .mat-tab-labels,
-  .mat-tab-label {
+  mat-mdc-tab-list,
+  .mat-mdc-tab-header,
+  .mat-mdc-tab-labels,
+  // Extra-specific selector to override dark-mode styling.
+  .mat-mdc-tab-header .mat-mdc-tab,
+  .mdc-tab__text-label {
     height: 100%;
   }
 
-  .mat-tab-label {
-    min-width: 48px; /* default is 160px which is too big for us */
+  .mat-mdc-tab {
+    letter-spacing: 0.25px;
+    min-width: 48px; /* default is 90px which is too big for us */
     padding: 0; /* default is 24px */
     text-transform: uppercase;
   }
 
-  .mat-tab-label-content {
-    height: 100%;
-  }
-
   mat-tab-header {
-    .mat-tab-list {
+    .mat-mdc-tab-list {
       // 36px is the size of the chevron. Please see [1] for the reason.
       padding: 0 36px;
     }
 
     > {
       :first-child,
-      .mat-tab-label-container,
+      .mat-mdc-tab-label-container,
       :last-child {
         // [1]: Reason for customizing the mat-tab-header.
         //
@@ -150,16 +162,16 @@ mat-option {
       }
 
       :first-child,
-      .mat-tab-label-container {
+      .mat-mdc-tab-label-container {
         left: 0;
       }
 
       :last-child,
-      .mat-tab-label-container {
+      .mat-mdc-tab-label-container {
         right: 0;
       }
 
-      .mat-tab-header-pagination {
+      .mat-mdc-tab-header-pagination {
         @include tb-theme-background-prop(background-color, app-bar);
       }
     }
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/BUILD b/tensorboard/webapp/metrics/views/card_renderer/BUILD
index 5d6cad6ff6..7076578ebc 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/BUILD
+++ b/tensorboard/webapp/metrics/views/card_renderer/BUILD
@@ -61,10 +61,10 @@ tf_ng_module(
     deps = [
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_input",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_select",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
+        "//tensorboard/webapp/angular:expect_angular_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_select",
         "//tensorboard/webapp/feature_flag/directives",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics/data_source",
@@ -106,9 +106,9 @@ tf_ng_module(
         ":vis_linked_time_selection_warning",
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_progress_spinner",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/data_source",
@@ -155,10 +155,10 @@ tf_ng_module(
         ":utils",
         ":vis_linked_time_selection_warning",
         "//tensorboard/webapp:app_state",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner",
         "//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_progress_spinner",
         "//tensorboard/webapp/feature_flag/directives",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics/actions",
@@ -332,11 +332,11 @@ tf_ng_module(
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
+        "//tensorboard/webapp/angular:expect_angular_material_progress_spinner",
         "//tensorboard/webapp/experiments:types",
         "//tensorboard/webapp/feature_flag/store",
         "//tensorboard/webapp/metrics:types",
@@ -449,13 +449,13 @@ tf_ts_library(
         "//tensorboard/webapp:selectors",
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_input",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_select",
         "//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
+        "//tensorboard/webapp/angular:expect_angular_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
+        "//tensorboard/webapp/angular:expect_angular_material_progress_spinner",
+        "//tensorboard/webapp/angular:expect_angular_material_select",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
         "//tensorboard/webapp/experiments:types",
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_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html
index 78e3e143cc..e3dc2f57ed 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html
@@ -32,7 +32,6 @@
   <span class="controls">
     <button
       mat-icon-button
-      class="pin-button"
       i18n-aria-label="A button to pin a card."
       aria-label="Pin card"
       [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
index 7341ba8411..d76360a2b6 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
@@ -55,10 +55,6 @@ $_title-to-heading-gap: 12px;
   }
 }
 
-.pin-button mat-icon {
-  height: 18px;
-}
-
 .run {
   grid-area: run;
   display: flex;
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_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html
index 8cd5bb626c..6279cc4acb 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html
@@ -30,7 +30,6 @@
     <span class="controls">
       <button
         mat-icon-button
-        class="pin-button"
         i18n-aria-label="A button to pin a card."
         aria-label="Pin card"
         [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
index 677d3bf5c3..99f6477de8 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
@@ -70,10 +70,6 @@ $_tick_width: 14px;
   overflow: hidden;
 }
 
-.pin-button mat-icon {
-  height: 18px;
-}
-
 .run {
   align-self: baseline;
   display: flex;
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.ng.html b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
index adcceda332..11113af833 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
@@ -44,7 +44,6 @@
       </button>
       <button
         mat-icon-button
-        class="pin-button"
         i18n-aria-label="A button to pin a card."
         aria-label="Pin card"
         [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
index 13939a426f..93213ec306 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
@@ -79,10 +79,6 @@ $_data_table_initial_height: 100px;
   overflow: hidden;
 }
 
-.pin-button mat-icon {
-  height: 18px;
-}
-
 .controls {
   @include metrics-card-controls;
   flex-shrink: 0;
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_data_table.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.scss
index 632accf973..0a75646c45 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.scss
@@ -14,6 +14,11 @@ limitations under the License.
 ==============================================================================*/
 $_circle-size: 12px;
 
+tb-data-table-content-cell,
+tb-data-table-header-cell {
+  padding: 4px;
+}
+
 .row-circle {
   height: $_circle-size;
   width: $_circle-size;
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 d8d1f2d6b7..fdb0cbed78 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/BUILD b/tensorboard/webapp/metrics/views/main_view/BUILD
index aadfccfca4..a0a2f17691 100644
--- a/tensorboard/webapp/metrics/views/main_view/BUILD
+++ b/tensorboard/webapp/metrics/views/main_view/BUILD
@@ -137,12 +137,12 @@ tf_ng_module(
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
         "//tensorboard/webapp/angular:expect_angular_cdk_scrolling",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_autocomplete",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_input",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner",
+        "//tensorboard/webapp/angular:expect_angular_material_autocomplete",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_button_toggle",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_progress_spinner",
         "//tensorboard/webapp/customization",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics:utils",
@@ -185,8 +185,8 @@ tf_ts_library(
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
         "//tensorboard/webapp/angular:expect_angular_cdk_scrolling",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_autocomplete",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_autocomplete",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
         "//tensorboard/webapp/app_routing",
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/BUILD b/tensorboard/webapp/metrics/views/right_pane/BUILD
index 68a3eb589c..2153af2602 100644
--- a/tensorboard/webapp/metrics/views/right_pane/BUILD
+++ b/tensorboard/webapp/metrics/views/right_pane/BUILD
@@ -27,12 +27,12 @@ tf_ng_module(
     deps = [
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_select",
         "//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_button_toggle",
+        "//tensorboard/webapp/angular:expect_angular_material_checkbox",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_select",
         "//tensorboard/webapp/feature_flag",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics/actions",
@@ -58,10 +58,10 @@ tf_ts_library(
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_select",
         "//tensorboard/webapp/angular:expect_angular_legacy_material_slider",
         "//tensorboard/webapp/angular:expect_angular_material_button_toggle",
+        "//tensorboard/webapp/angular:expect_angular_material_checkbox",
+        "//tensorboard/webapp/angular:expect_angular_material_select",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
         "//tensorboard/webapp/metrics:types",
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/BUILD b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/BUILD
index eaf9997903..4de20c5ee4 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/BUILD
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/BUILD
@@ -26,8 +26,8 @@ tf_ng_module(
     deps = [
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_tabs",
+        "//tensorboard/webapp/angular:expect_angular_material_checkbox",
+        "//tensorboard/webapp/angular:expect_angular_material_tabs",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/store",
@@ -50,7 +50,8 @@ tf_ts_library(
         ":scalar_column_editor",
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_tabs",
+        "//tensorboard/webapp/angular:expect_angular_material_checkbox",
+        "//tensorboard/webapp/angular:expect_angular_material_tabs",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
         "//tensorboard/webapp/metrics/actions",
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ng.html b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ng.html
index 667eaa8deb..fc0f611463 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ng.html
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ng.html
@@ -51,21 +51,19 @@
   let-headers="headers"
   let-dataTableMode="dataTableMode"
 >
-  <div class="header-list">
-    <div
-      class="header-list-item"
-      *ngFor="let header of headers;"
-      draggable="true"
-      (dragstart)="dragStart(header)"
-      (dragend)="dragEnd(dataTableMode)"
-      (dragenter)="dragEnter(header, dataTableMode)"
-      [ngClass]="getHighlightClasses(header)"
-    >
-      <mat-checkbox
-        [checked]="header.enabled"
-        (change)="toggleHeader(header, dataTableMode)"
-        ><tb-data-table-header [header]="header"></tb-data-table-header
-      ></mat-checkbox>
-    </div>
+  <div
+    class="header-list-item"
+    *ngFor="let header of headers;"
+    draggable="true"
+    (dragstart)="dragStart(header)"
+    (dragend)="dragEnd(dataTableMode)"
+    (dragenter)="dragEnter(header, dataTableMode)"
+    [ngClass]="getHighlightClasses(header)"
+  >
+    <mat-checkbox
+      [checked]="header.enabled"
+      (change)="toggleHeader(header, dataTableMode)"
+      ><tb-data-table-header [header]="header"></tb-data-table-header
+    ></mat-checkbox>
   </div>
 </ng-template>
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
index b0fb76e1c6..2a3f3c0464 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
@@ -32,13 +32,10 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
   z-index: 0;
   height: 100%;
 }
-.header-list {
-  margin-top: 5%;
-  margin-left: 5%;
-}
 
 .header-list-item {
   padding: 3px;
+  height: 24px;
 }
 
 .highlighted {
@@ -85,6 +82,6 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
 // allowed for the tab content. Then the child element can correctly decide when
 // a scroll bar is needed. This class is added to a div internal to the
 // mat-tab-group.
-::ng-deep .mat-tab-body-wrapper {
+::ng-deep .mat-mdc-tab-body-wrapper {
   flex: 1;
 }
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/metrics/views/right_pane/settings_view_component.scss b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
index 85fb658009..8ca9a87c7a 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
@@ -34,7 +34,10 @@ section {
   margin: 0 0 12px 0;
 }
 
-section .control-row:not(:last-child) {
+// Add additional margin between most control elements. The exception is when
+// the second control row is a checkbox, in which case we just rely on the
+// padding that is already included in the checkbox.
+section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
   margin-bottom: 12px;
 }
 
@@ -89,6 +92,20 @@ section .control-row:not(:last-child) {
   }
 }
 
+mat-checkbox {
+  // Counteract the padding of the checkbox in order to align it vertically
+  // with other items in the pane.
+  margin-left: -11px;
+
+  ::ng-deep label {
+    @include tb-theme-foreground-prop(color, secondary-text);
+    font-size: 12px;
+    letter-spacing: normal;
+    padding-left: 0px;
+    white-space: nowrap;
+  }
+}
+
 mat-slider {
   flex: 1;
   // Reset mat-slider's internal extra space on left/right sides
@@ -116,7 +133,6 @@ mat-slider {
     }
   }
   mat-icon {
-    width: 15px;
     margin-right: 6px;
   }
 }
@@ -125,12 +141,8 @@ tb-dropdown {
   display: block;
 }
 
-.linked-time {
-  padding: 5px 0;
-}
-
 .control-row {
   .indent {
-    margin-left: 25px;
+    margin-left: 28px;
   }
 }
diff --git a/tensorboard/webapp/notification_center/_views/BUILD b/tensorboard/webapp/notification_center/_views/BUILD
index 4954a5de09..2ca9ee2ffe 100644
--- a/tensorboard/webapp/notification_center/_views/BUILD
+++ b/tensorboard/webapp/notification_center/_views/BUILD
@@ -29,9 +29,9 @@ tf_ng_module(
     deps = [
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
         "//tensorboard/webapp/notification_center/_redux",
         "//tensorboard/webapp/notification_center/_redux:actions",
         "//tensorboard/webapp/notification_center/_redux:types",
@@ -54,9 +54,9 @@ tf_ts_library(
         ":_views",
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_snackbar",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
+        "//tensorboard/webapp/angular:expect_angular_material_snackbar",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
         "//tensorboard/webapp/notification_center/_redux",
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/BUILD b/tensorboard/webapp/runs/views/runs_table/BUILD
index 475344b18b..4d936d8af1 100644
--- a/tensorboard/webapp/runs/views/runs_table/BUILD
+++ b/tensorboard/webapp/runs/views/runs_table/BUILD
@@ -81,17 +81,17 @@ tf_ng_module(
         "//tensorboard/webapp:selectors",
         "//tensorboard/webapp/alert",
         "//tensorboard/webapp/alert/actions",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_form_field",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_input",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_paginator",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_table",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_checkbox",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
+        "//tensorboard/webapp/angular:expect_angular_material_form_field",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
+        "//tensorboard/webapp/angular:expect_angular_material_paginator",
+        "//tensorboard/webapp/angular:expect_angular_material_progress_spinner",
         "//tensorboard/webapp/angular:expect_angular_material_sort",
+        "//tensorboard/webapp/angular:expect_angular_material_table",
         "//tensorboard/webapp/app_routing",
         "//tensorboard/webapp/app_routing:types",
         "//tensorboard/webapp/core/actions",
@@ -140,14 +140,14 @@ tf_ts_library(
         "//tensorboard/webapp/alert/actions",
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_input",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_paginator",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_table",
+        "//tensorboard/webapp/angular:expect_angular_material_checkbox",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
+        "//tensorboard/webapp/angular:expect_angular_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
+        "//tensorboard/webapp/angular:expect_angular_material_paginator",
+        "//tensorboard/webapp/angular:expect_angular_material_progress_spinner",
         "//tensorboard/webapp/angular:expect_angular_material_sort",
+        "//tensorboard/webapp/angular:expect_angular_material_table",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_dynamic_testing",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog.ng.html b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog.ng.html
index a5b8d58bf3..06b4aa17bb 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog.ng.html
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog.ng.html
@@ -91,6 +91,7 @@ <h4>Color group preview</h4>
   <div mat-dialog-actions align="end">
     <button mat-button mat-dialog-close>Cancel</button>
     <button
+      class="save-button"
       mat-raised-button
       color="primary"
       mat-dialog-close
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
index 323baf01ad..08c04640e9 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
@@ -14,6 +14,8 @@ limitations under the License.
 ==============================================================================*/
 @import 'tensorboard/webapp/theme/tb_theme';
 
+$padding-size: 16px;
+
 .example-details {
   button {
     background-color: transparent;
@@ -26,13 +28,14 @@ limitations under the License.
       @include tb-theme-foreground-prop(color, link-visited);
     }
   }
+  padding: $padding-size;
 }
 
 .group-container {
-  margin: 10px 0;
+  margin: $padding-size;
 
   h4 {
-    margin-bottom: 10px;
+    margin-bottom: $padding-size;
   }
 
   .warning {
@@ -45,7 +48,7 @@ limitations under the License.
   @include tb-theme-foreground-prop(border, border, 1px solid);
   max-height: 50vh;
   overflow-y: auto;
-  padding: 20px;
+  padding: $padding-size;
 }
 
 .match-container {
@@ -78,7 +81,7 @@ mat-form-field {
   @include tb-theme-foreground-prop(border, border, 1px solid);
   border-radius: 3px;
   margin: 0;
-  padding: 10px;
+  padding: $padding-size;
 
   label {
     @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
@@ -86,7 +89,7 @@ mat-form-field {
     display: grid;
     gap: 10px;
     grid-template-columns: max-content auto;
-    padding: 5px 0;
+    padding: $padding-size 0;
 
     .group-id {
       font-size: 0.95em;
@@ -109,6 +112,10 @@ mat-form-field {
   .more,
   .no-match {
     @include tb-theme-foreground-prop(color, secondary-text);
-    margin-top: 5px;
+    margin-top: $padding-size;
   }
 }
+
+.save-button {
+  color: inherit;
+}
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..7c466d80c9 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
@@ -13,10 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {Component, Inject} from '@angular/core';
-import {
-  MatLegacyDialogRef,
-  MAT_LEGACY_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
+import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {Store} from '@ngrx/store';
 import {combineLatest, defer, merge, Observable, Subject} from 'rxjs';
 import {
@@ -123,8 +120,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.scss b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
index 757229b8ec..6fe5224970 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
@@ -48,18 +48,16 @@ $_arrow_size: 16px;
 
 tb-data-table-content-row,
 tb-data-table-header-cell {
-  height: 44px;
+  // Match the size of the touch targets for the checkbox.
+  height: 48px;
 }
 
 tb-data-table-content-cell,
 tb-data-table-header-cell {
+  padding: 0 4px;
   vertical-align: middle;
   @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
 
-  &:first-child {
-    padding-left: 16px;
-  }
-
   &:last-child {
     @include tb-theme-foreground-prop(border-right, border, 1px solid);
   }
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.ng.html b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ng.html
index d80243a3ee..24f0820237 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ng.html
+++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ng.html
@@ -31,13 +31,11 @@
     [attr.aria-checked]="selectedGroupBy.key === GroupByKey.EXPERIMENT"
     (click)="onGroupByChange.emit({key: GroupByKey.EXPERIMENT})"
   >
-    <span>
-      <mat-icon
-        *ngIf="selectedGroupBy.key === GroupByKey.EXPERIMENT"
-        svgIcon="done_24px"
-      ></mat-icon>
-    </span>
-    <label>Experiment</label>
+    <mat-icon
+      *ngIf="selectedGroupBy.key === GroupByKey.EXPERIMENT"
+      svgIcon="done_24px"
+    ></mat-icon>
+    <span>Experiment</span>
   </button>
   <button
     mat-menu-item
@@ -46,13 +44,11 @@
     [attr.aria-checked]="selectedGroupBy.key === GroupByKey.RUN"
     (click)="onGroupByChange.emit({key: GroupByKey.RUN})"
   >
-    <span>
-      <mat-icon
-        *ngIf="selectedGroupBy.key === GroupByKey.RUN"
-        svgIcon="done_24px"
-      ></mat-icon>
-    </span>
-    <label>Run</label>
+    <mat-icon
+      *ngIf="selectedGroupBy.key === GroupByKey.RUN"
+      svgIcon="done_24px"
+    ></mat-icon>
+    <span>Run</span>
   </button>
   <button
     mat-menu-item
@@ -61,13 +57,11 @@
     [attr.aria-checked]="selectedGroupBy.key === GroupByKey.REGEX"
     (click)="onGroupByRegexClick()"
   >
-    <span>
-      <mat-icon
-        *ngIf="selectedGroupBy.key === GroupByKey.REGEX"
-        svgIcon="done_24px"
-      ></mat-icon>
-    </span>
-    <label>Regex</label>
+    <mat-icon
+      *ngIf="selectedGroupBy.key === GroupByKey.REGEX"
+      svgIcon="done_24px"
+    ></mat-icon>
+    <span>Regex</span>
   </button>
   <button
     mat-menu-item
@@ -76,10 +70,8 @@
     (click)="onRegexStringEdit()"
     class="display-regex-string"
   >
-    <span>
-      <mat-icon svgIcon="edit_24px"></mat-icon>
-    </span>
-    <label *ngIf="regexString">{{regexString}}</label>
-    <label *ngIf="!regexString" class="none-set-string">(none set)</label>
+    <mat-icon svgIcon="edit_24px"></mat-icon>
+    <span *ngIf="regexString">{{regexString}}</span>
+    <span *ngIf="!regexString" class="none-set-string">(none set)</span>
   </button>
 </mat-menu>
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
index 545a7a0fc3..172eb5151b 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
@@ -27,12 +27,6 @@ limitations under the License.
     pointer-events: none;
   }
 
-  button {
-    display: grid;
-    gap: 2px 10px;
-    grid-template-columns: $_icon-size auto;
-  }
-
   mat-icon {
     height: $_icon-size;
     width: $_icon-size;
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 8dca1ccc06..b467a5a0f3 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,
@@ -638,7 +638,7 @@ describe('runs_table', () => {
         const items = getOverlayMenuItems();
 
         expect(
-          items.map((element) => element.querySelector('label')!.textContent)
+          items.map((element) => element.querySelector('span')!.textContent)
         ).toEqual(['Experiment', 'Run', 'Regex', '(none set)']);
       });
 
@@ -655,9 +655,10 @@ describe('runs_table', () => {
 
         openColorGroupDialog(fixture);
         const items = getOverlayMenuItems();
+        console.log('items', items);
 
         expect(
-          items.map((element) => element.querySelector('label')!.textContent)
+          items.map((element) => element.querySelector('span')!.textContent)
         ).toEqual(['Run', 'Regex', '(none set)']);
       });
 
@@ -1052,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:');
     });
@@ -1176,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');
@@ -1732,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(
@@ -1768,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/BUILD b/tensorboard/webapp/settings/_views/BUILD
index 7c23e752d5..3e6f5f5324 100644
--- a/tensorboard/webapp/settings/_views/BUILD
+++ b/tensorboard/webapp/settings/_views/BUILD
@@ -18,11 +18,11 @@ tf_ng_module(
     ],
     deps = [
         "//tensorboard/webapp:tb_polymer_interop_types",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_checkbox",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_input",
         "//tensorboard/webapp/settings/_redux",
         "//tensorboard/webapp/types",
         "@npm//@angular/common",
@@ -44,11 +44,11 @@ tf_ts_library(
         ":_views",
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_checkbox",
+        "//tensorboard/webapp/angular:expect_angular_material_dialog",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_input",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_dynamic_testing",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
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_dialog_component.css b/tensorboard/webapp/settings/_views/settings_dialog_component.css
index 4dd687235c..53437e453d 100644
--- a/tensorboard/webapp/settings/_views/settings_dialog_component.css
+++ b/tensorboard/webapp/settings/_views/settings_dialog_component.css
@@ -17,21 +17,14 @@ limitations under the License.
 }
 
 :host > div {
-  margin: 10px 0;
-}
-
-:host > :first-child {
-  margin-top: 0;
-}
-
-:host > :last-child {
-  margin-bottom: 0;
+  margin: 16px;
 }
 
 h3 {
   font-size: 20px;
+  margin: 16px;
 }
 
 .reload-toggle {
-  margin-bottom: 10px;
+  margin-bottom: 16px;
 }
diff --git a/tensorboard/webapp/settings/_views/settings_dialog_component.ng.html b/tensorboard/webapp/settings/_views/settings_dialog_component.ng.html
index 1984441d7a..c738118073 100644
--- a/tensorboard/webapp/settings/_views/settings_dialog_component.ng.html
+++ b/tensorboard/webapp/settings/_views/settings_dialog_component.ng.html
@@ -23,11 +23,11 @@ <h3>Settings</h3>
   </div>
   <div>
     <mat-form-field>
+      <mat-label>Reload Period (seconds)</mat-label>
       <input
         class="reload-period"
         matInput
         type="number"
-        placeholder="Reload Period (seconds)"
         [formControl]="reloadPeriodControl"
       />
     </mat-form-field>
@@ -43,11 +43,11 @@ <h3>Settings</h3>
 </div>
 <div>
   <mat-form-field>
+    <mat-label>Pagination Limit</mat-label>
     <input
       class="page-size"
       matInput
       type="number"
-      placeholder="Pagination Limit"
       [formControl]="paginationControl"
     />
   </mat-form-field>
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 24ed43be2f..5f41a23c85 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -268,6 +268,7 @@ $tb-dark-theme: map_merge(
   @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);
   @include mat.all-component-themes($tb-theme);
 
@@ -282,7 +283,7 @@ $tb-dark-theme: map_merge(
     contain: strict;
   }
 
-  a:not(.mat-button, .mat-icon-button) {
+  a:not(.mdc-button, .mdc-icon-button) {
     color: map-get($tb-foreground, link);
 
     &:visited {
@@ -290,12 +291,45 @@ $tb-dark-theme: map_merge(
     }
   }
 
+  body,
+  body.dark-mode {
+    a,
+    button.mat-mdc-button-base {
+      --tb-icon-size: 24px;
+      --mdc-typography-button-letter-spacing: normal;
+
+      &[mat-icon-button].mat-mdc-icon-button {
+        width: 40px;
+        height: 40px;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        .mat-mdc-button-touch-target {
+          height: 100%;
+          width: 100%;
+        }
+      }
+
+      mat-icon.mat-icon {
+        flex-shrink: 0;
+      }
+
+      mat-icon.mat-icon,
+      svg {
+        width: var(--tb-icon-size);
+        height: var(--tb-icon-size);
+        line-height: var(--tb-icon-size);
+      }
+    }
+  }
+
   // Cannot use `tb-dark-theme` as :host-context in the global stylesheet is
   // meaningless.
   body.dark-mode {
     background-color: map-get($tb-dark-background, background);
 
-    a:not(.mat-button, .mat-icon-button) {
+    a:not(.mdc-button, .mdc-icon-button) {
       color: map-get($tb-dark-foreground, link);
 
       &:visited {
diff --git a/tensorboard/webapp/widgets/data_table/BUILD b/tensorboard/webapp/widgets/data_table/BUILD
index 035ace3794..773be63f41 100644
--- a/tensorboard/webapp/widgets/data_table/BUILD
+++ b/tensorboard/webapp/widgets/data_table/BUILD
@@ -83,7 +83,7 @@ tf_ng_module(
         ":data_table_header",
         ":filter_dialog",
         ":types",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
         "//tensorboard/webapp/metrics/views/card_renderer:scalar_card_types",
         "//tensorboard/webapp/widgets/custom_modal",
@@ -125,9 +125,9 @@ tf_ng_module(
     ],
     deps = [
         ":types",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_input",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
diff --git a/tensorboard/webapp/widgets/data_table/column_selector_component.ng.html b/tensorboard/webapp/widgets/data_table/column_selector_component.ng.html
index eea57cd30c..b3ef95302e 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_component.ng.html
+++ b/tensorboard/webapp/widgets/data_table/column_selector_component.ng.html
@@ -14,11 +14,11 @@
 <div class="contents">
   <mat-form-field class="search-area">
     <mat-icon matPrefix class="search-icon" svgIcon="search_24px"></mat-icon>
+    <mat-label>Search</mat-label>
     <input
       matInput
       #search
       [(ngModel)]="searchInput"
-      placeholder="Search"
       (ngModelChange)="searchInputChanged()"
     />
   </mat-form-field>
diff --git a/tensorboard/webapp/widgets/data_table/column_selector_component.scss b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
index fb850e29d0..97bd7f0bac 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_component.scss
+++ b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
@@ -38,14 +38,6 @@ limitations under the License.
 
   .search-area {
     margin-bottom: 4px;
-
-    mat-icon.search-icon {
-      font-size: 1em;
-
-      ::ng-deep svg {
-        padding-top: 6px;
-      }
-    }
   }
 
   .column-list {
@@ -58,7 +50,11 @@ limitations under the License.
   }
 
   .column-button {
-    text-align: left;
+    // Don't allow buttons to shrink when there are many of them.
+    flex-shrink: 0;
+    // Match height of button touch target to avoid unnecessary scrollbar.
+    height: 48px;
+    justify-content: left;
     width: 100%;
 
     &.selected {
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/content_cell_component.scss b/tensorboard/webapp/widgets/data_table/content_cell_component.scss
index 54a9dcfd8e..dbdcf5ee6c 100644
--- a/tensorboard/webapp/widgets/data_table/content_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/content_cell_component.scss
@@ -15,8 +15,8 @@ limitations under the License.
 
 :host {
   display: table-cell;
-  padding: 4px;
 }
+
 .cell {
   align-items: center;
   display: flex;
diff --git a/tensorboard/webapp/widgets/data_table/data_table_component.ng.html b/tensorboard/webapp/widgets/data_table/data_table_component.ng.html
index d41860fa71..e7872fdc16 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.ng.html
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.ng.html
@@ -26,22 +26,24 @@
       <mat-icon svgIcon="close_24px"></mat-icon>Remove
     </button>
     <button
-      *ngIf="contextMenuHeader?.sortable"
+      *ngIf="contextMenuHeader?.sortable &&
+      sortingInfo.order === SortingOrder.ASCENDING &&
+      sortingInfo.name === contextMenuHeader?.name"
       class="context-menu-button sort-button"
       mat-button
       (click)="sortByHeader(contextMenuHeader?.name)"
     >
-      <ng-container
-        *ngIf="
-          sortingInfo.order === SortingOrder.ASCENDING &&
-          sortingInfo.name === contextMenuHeader?.name;
-          else descending"
-      >
-        <mat-icon svgIcon="arrow_downward_24px"></mat-icon>Sort Descending
-      </ng-container>
-      <ng-template #descending>
-        <mat-icon svgIcon="arrow_upward_24px"></mat-icon>Sort Ascending
-      </ng-template>
+      <mat-icon svgIcon="arrow_downward_24px"></mat-icon>Sort Descending
+    </button>
+    <button
+      *ngIf="contextMenuHeader?.sortable &&
+      (sortingInfo.order !== SortingOrder.ASCENDING ||
+      sortingInfo.name !== contextMenuHeader?.name)"
+      class="context-menu-button sort-button"
+      mat-button
+      (click)="sortByHeader(contextMenuHeader?.name)"
+    >
+      <mat-icon svgIcon="arrow_upward_24px"></mat-icon>Sort Ascending
     </button>
     <button
       *ngIf="contextMenuHeader?.filterable"
diff --git a/tensorboard/webapp/widgets/data_table/data_table_component.scss b/tensorboard/webapp/widgets/data_table/data_table_component.scss
index c35a3f4803..02a53f75fa 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.scss
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.scss
@@ -66,8 +66,9 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
   }
 
   .context-menu-button {
-    text-align: left;
+    justify-content: left;
     width: 100%;
+    text-wrap: nowrap;
   }
 
   .no-actions-message {
diff --git a/tensorboard/webapp/widgets/data_table/data_table_module.ts b/tensorboard/webapp/widgets/data_table/data_table_module.ts
index b5aa3875a3..62ced1d9f5 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_module.ts
+++ b/tensorboard/webapp/widgets/data_table/data_table_module.ts
@@ -16,6 +16,7 @@ limitations under the License.
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
 import {DataTableComponent} from './data_table_component';
 import {HeaderCellComponent} from './header_cell_component';
 import {DataTableHeaderModule} from './data_table_header_module';
@@ -23,7 +24,6 @@ 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 {FilterDialogModule} from './filter_dialog_module';
 
 @NgModule({
@@ -42,7 +42,7 @@ import {FilterDialogModule} from './filter_dialog_module';
   imports: [
     CommonModule,
     MatIconModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     DataTableHeaderModule,
     CustomModalModule,
     ColumnSelectorModule,
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index 704f98ccda..08b8635e03 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -18,10 +18,10 @@ limitations under the License.
 
 $_accent: map-get(mat.get-color-config($tb-theme), accent);
 $_icon_size: 12px;
+$_icon_padding: 4px;
 
 :host {
   display: table-cell;
-  padding: 2px;
   vertical-align: bottom;
 
   &:hover {
@@ -40,16 +40,6 @@ $_icon_size: 12px;
   }
 }
 
-.sorting-icon-container,
-.context-menu-container {
-  width: $_icon_size + 4px;
-  height: $_icon_size + 4px;
-  border-radius: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .cell {
   align-items: center;
   display: flex;
@@ -60,6 +50,18 @@ $_icon_size: 12px;
     line-height: 1;
   }
 
+  button[mat-icon-button].mat-mdc-icon-button {
+    &.sorting-icon-container,
+    &.context-menu-container {
+      width: $_icon_size + $_icon_padding;
+      height: $_icon_size + $_icon_padding;
+      --tb-icon-size: #{$_icon_size};
+      border-radius: 5px;
+      font-size: 12px;
+      padding: $_icon_padding;
+    }
+  }
+
   .sorting-icon-container {
     ::ng-deep path {
       fill: unset;
diff --git a/tensorboard/webapp/widgets/dropdown/BUILD b/tensorboard/webapp/widgets/dropdown/BUILD
index 444abca4b2..2e915ea483 100644
--- a/tensorboard/webapp/widgets/dropdown/BUILD
+++ b/tensorboard/webapp/widgets/dropdown/BUILD
@@ -24,7 +24,7 @@ tf_ng_module(
         ":dropdown_styles",
     ],
     deps = [
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_select",
+        "//tensorboard/webapp/angular:expect_angular_material_select",
         "@npm//@angular/common",
         "@npm//@angular/core",
     ],
@@ -38,8 +38,8 @@ tf_ts_library(
         ":dropdown",
         "//tensorboard/webapp/angular:expect_angular_cdk_testing_testbed",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_select",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_select_testing",
+        "//tensorboard/webapp/angular:expect_angular_material_select",
+        "//tensorboard/webapp/angular:expect_angular_material_select_testing",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
index 0293c23d3e..69042a8b06 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
@@ -20,6 +20,16 @@ mat-select {
   border-radius: 3px;
   box-sizing: border-box;
   padding: 6px;
+
+  // Default is 16px.
+  font-size: 12px;
+  // Default is 24px.
+  line-height: normal;
+
+  ::ng-deep .mat-mdc-select-arrow-wrapper {
+    // Default is 24px.
+    height: 12px;
+  }
 }
 
 mat-select:focus {
@@ -29,21 +39,15 @@ mat-select:focus {
   outline-style: auto;
 }
 
-::ng-deep .mat-select-panel {
+::ng-deep .mat-mdc-select-panel {
   max-width: 70vw;
 }
 
 // This selector needs relatively more specificity than Angular Material's
 // to override the fixed height.
-::ng-deep mat-option.mat-option {
-  height: auto;
-}
-
-::ng-deep .mat-option-text {
-  white-space: normal;
-  word-break: break-all;
-}
-
-.option-content {
-  white-space: nowrap;
+::ng-deep mat-option.mat-mdc-option {
+  // Default is 48px.
+  min-height: 32px;
+  // Default is 16px.
+  font-size: 12px;
 }
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.ts b/tensorboard/webapp/widgets/dropdown/dropdown_component.ts
index c89bea334c..026a8671c1 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_component.ts
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.ts
@@ -35,6 +35,7 @@ export interface DropdownOption {
   template: `
     <mat-select
       [value]="value"
+      [hideSingleSelectionIndicator]="true"
       (selectionChange)="selectionChange.emit($event.value)"
     >
       <mat-option
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/BUILD b/tensorboard/webapp/widgets/filter_input/BUILD
index b4b41bd3f3..ec87ba1909 100644
--- a/tensorboard/webapp/widgets/filter_input/BUILD
+++ b/tensorboard/webapp/widgets/filter_input/BUILD
@@ -21,7 +21,7 @@ tf_ng_module(
         ":filter_input_component_styles",
     ],
     deps = [
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_autocomplete",
+        "//tensorboard/webapp/angular:expect_angular_material_autocomplete",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
         "@npm//@angular/common",
         "@npm//@angular/core",
@@ -38,7 +38,7 @@ tf_ts_library(
         ":filter_input",
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_autocomplete",
+        "//tensorboard/webapp/angular:expect_angular_material_autocomplete",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/testing:dom",
         "//tensorboard/webapp/testing:mat_icon",
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/BUILD b/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD
index 6937508076..130ef7f42d 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD
@@ -39,10 +39,10 @@ tf_ng_module(
     deps = [
         ":internal_types",
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_input",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
         "//tensorboard/webapp/third_party:d3",
         "//tensorboard/webapp/util:dom",
         "//tensorboard/webapp/widgets/line_chart_v2/lib:public_types",
@@ -76,10 +76,10 @@ tf_ts_library(
         "//tensorboard/webapp/angular:expect_angular_cdk_overlay",
         "//tensorboard/webapp/angular:expect_angular_cdk_testing_testbed",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_button",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_input",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu",
-        "//tensorboard/webapp/angular:expect_angular_legacy_material_menu_testing",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_menu",
+        "//tensorboard/webapp/angular:expect_angular_material_menu_testing",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/testing:mat_icon",
         "//tensorboard/webapp/widgets/line_chart_v2/lib:public_types",
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
index d60fe1c6d1..1a5c34f7cc 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
@@ -33,7 +33,7 @@
       </g>
     </svg>
     <button
-      [class.extent-edit-button]="true"
+      class="extent-edit-button"
       [class.extent-edit-menu-opened]="editMenuOpened"
       mat-icon-button
       #matMenuTrigger="matMenuTrigger"
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
index 0030b9aa3b..5e0383f0bc 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
@@ -32,6 +32,17 @@ text {
   display: flex;
   height: 100%;
   width: 100%;
+
+  .extent-edit-button {
+    --tb-icon-size: 16px;
+    height: 24px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    visibility: hidden;
+    width: 24px;
+    padding: 0;
+  }
 }
 
 .major,
@@ -112,24 +123,6 @@ text {
   }
 }
 
-.extent-edit-button {
-  background-color: mat.get-color-from-palette(mat.$gray-palette, 200);
-  font-size: 0;
-  height: 24px;
-  line-height: 24px;
-  position: absolute;
-  right: 5px;
-  top: 5px;
-  visibility: hidden;
-  width: 24px;
-
-  mat-icon {
-    height: 16px;
-    width: 16px;
-    line-height: 16px;
-  }
-}
-
 .extent-edit-input {
   align-items: center;
   column-gap: 5px;
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 e2e163c956..54304b7944 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;
   }
@@ -151,7 +151,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');
       });
     });