From ef1fd37bf07793b0d9d8e3facb885634abb093ae Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Wed, 30 Apr 2025 13:16:12 -0600
Subject: [PATCH] docs: rename material.angular.io to material.angular.dev

# Conflicts:
#	docs/angular.json
#	docs/firebase.json
---
 .git-blame-ignore-revs                        |  2 +-
 .github/ISSUE_TEMPLATE/docs.yml               |  6 +--
 .github/workflows/ci.material-aio.yml         |  6 +--
 .github/workflows/pr.material-aio.yml         |  6 +--
 CHANGELOG.md                                  |  4 +-
 CHANGELOG_ARCHIVE.md                          | 34 ++++++++---------
 CODING_STANDARDS.md                           |  2 +-
 README.md                                     |  6 +--
 docs/README.md                                | 20 +++++-----
 .../app/shared/doc-viewer/doc-viewer.spec.ts  | 38 +++++++++----------
 docs/src/app/shared/navbar/navbar.ts          |  2 +-
 .../shared/stack-blitz/stack-blitz-writer.ts  |  2 +-
 docs/src/assets/versions.json                 | 18 ++++-----
 docs/src/index.html                           | 16 ++++----
 docs/src/robots.txt                           |  2 +-
 docs/src/sitemap.xml                          |  8 ++--
 docs/tools/audit-docs.js                      |  4 +-
 .../creating-a-custom-form-field-control.md   |  2 +-
 ...-a-custom-stepper-using-the-cdk-stepper.md |  4 +-
 guides/getting-started.md                     |  8 ++--
 guides/material-2.md                          | 10 ++---
 guides/schematics.md                          |  4 +-
 guides/theming.md                             |  4 +-
 scripts/deploy/publish-docs-content.sh        |  2 +-
 scripts/docs-deploy/deploy-ci-push.mts        | 10 ++---
 scripts/docs-deploy/snapshot-deploy.mts       |  2 +-
 scripts/docs-deploy/utils.mts                 |  8 ++--
 src/cdk/menu/menu.md                          |  2 +-
 src/cdk/table/table.md                        |  4 +-
 src/cdk/testing/test-harnesses.md             |  2 +-
 .../card-media-size-example.html              |  8 ++--
 .../card-overview/card-overview-example.css   |  2 +-
 .../card-overview/card-overview-example.html  |  4 +-
 .../chips-avatar/chips-avatar-example.html    |  6 +--
 src/dev-app/chips/chips-demo.html             |  4 +-
 src/dev-app/list/list-demo.html               |  4 +-
 src/material/autocomplete/README.md           |  2 +-
 src/material/badge/badge.md                   |  2 +-
 src/material/badge/badge.ts                   |  6 +--
 src/material/bottom-sheet/README.md           |  2 +-
 src/material/button-toggle/README.md          |  2 +-
 src/material/button/button-base.ts            |  4 +-
 src/material/button/button.md                 |  6 +--
 src/material/button/fab.ts                    |  4 +-
 src/material/card/README.md                   |  2 +-
 src/material/checkbox/README.md               |  2 +-
 src/material/checkbox/checkbox-config.ts      |  4 +-
 src/material/checkbox/checkbox.ts             |  4 +-
 src/material/chips/README.md                  |  2 +-
 src/material/chips/chip.ts                    |  4 +-
 src/material/core/m2/_typography.scss         |  2 +-
 src/material/core/theming/_theming.scss       |  4 +-
 src/material/datepicker/README.md             |  2 +-
 src/material/datepicker/datepicker-base.ts    | 12 +++---
 src/material/dialog/README.md                 |  2 +-
 src/material/divider/README.md                |  2 +-
 src/material/form-field/README.md             |  2 +-
 src/material/form-field/form-field.md         |  8 ++--
 src/material/form-field/form-field.ts         |  8 ++--
 src/material/grid-list/README.md              |  2 +-
 src/material/icon/README.md                   |  2 +-
 src/material/icon/icon.ts                     |  8 ++--
 src/material/input/README.md                  |  2 +-
 src/material/input/input.md                   | 14 +++----
 src/material/list/README.md                   |  2 +-
 src/material/list/list-option.ts              |  4 +-
 src/material/list/selection-list.ts           |  4 +-
 src/material/menu/README.md                   |  2 +-
 src/material/paginator/paginator.ts           |  4 +-
 src/material/progress-bar/README.md           |  2 +-
 src/material/progress-bar/progress-bar.ts     |  8 ++--
 src/material/progress-spinner/README.md       |  2 +-
 .../progress-spinner/progress-spinner.ts      |  8 ++--
 src/material/radio/README.md                  |  2 +-
 src/material/radio/radio.ts                   | 12 +++---
 src/material/schematics/ng-add/schema.json    |  8 ++--
 .../ng-add/theming/create-custom-theme.ts     |  2 +-
 .../ng-generate/theme-color/README.md         |  6 +--
 src/material/select/README.md                 |  2 +-
 src/material/select/select.md                 | 10 ++---
 src/material/sidenav/README.md                |  2 +-
 src/material/slide-toggle/README.md           |  2 +-
 .../slide-toggle/slide-toggle-config.ts       |  4 +-
 src/material/slide-toggle/slide-toggle.ts     |  4 +-
 src/material/slider/README.md                 |  2 +-
 src/material/slider/slider-interface.ts       |  2 +-
 src/material/slider/slider.ts                 |  4 +-
 src/material/snack-bar/README.md              |  2 +-
 src/material/stepper/step-header.ts           |  4 +-
 src/material/stepper/stepper.ts               |  8 ++--
 src/material/table/README.md                  |  2 +-
 src/material/table/table.md                   |  8 ++--
 src/material/tabs/README.md                   |  2 +-
 src/material/tabs/tab-group.ts                |  8 ++--
 src/material/tabs/tab-nav-bar/tab-nav-bar.ts  |  8 ++--
 src/material/toolbar/README.md                |  2 +-
 src/material/toolbar/toolbar.ts               |  4 +-
 src/material/tooltip/README.md                |  2 +-
 tools/dgeni/common/compute-api-url.ts         |  6 +--
 tools/region-parser/README.md                 |  2 +-
 100 files changed, 269 insertions(+), 269 deletions(-)

diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index bcd999bde3be..e30d8f489463 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -1,2 +1,2 @@
-# `material.angular.io/` folder renamed to `docs/`
+# `material.angular.dev/` folder renamed to `docs/`
 cc8d090758b6448a3f745e1faf3e503a293b1757
diff --git a/.github/ISSUE_TEMPLATE/docs.yml b/.github/ISSUE_TEMPLATE/docs.yml
index 32f05e124764..2a628c6ebdc1 100644
--- a/.github/ISSUE_TEMPLATE/docs.yml
+++ b/.github/ISSUE_TEMPLATE/docs.yml
@@ -1,5 +1,5 @@
 name: Documentation
-description: Suggest an improvement to our documentation at material.angular.io
+description: Suggest an improvement to our documentation at material.angular.dev
 title: 'docs-bug(COMPONENT): TITLE'
 labels: ['docs', 'needs triage']
 body:
@@ -8,7 +8,7 @@ body:
     attributes:
       label: Documentation Feedback
       description: |
-        Provide a brief summary of what you would like to see changed in our documentation at [material.angular.io](https://material.angular.io/).
+        Provide a brief summary of what you would like to see changed in our documentation at [material.angular.dev](https://material.angular.dev/).
         Feel free to provide any suggestions of content or examples you’d like us to include.
     validations:
       required: true
@@ -16,6 +16,6 @@ body:
     id: affected-documentation-page
     attributes:
       label: Affected documentation page
-      description: Insert a link to the affected page on [material.angular.io](https://material.angular.io/).
+      description: Insert a link to the affected page on [material.angular.dev](https://material.angular.dev/).
     validations:
       required: true
diff --git a/.github/workflows/ci.material-aio.yml b/.github/workflows/ci.material-aio.yml
index c62ff067985d..bd9efb8a72aa 100644
--- a/.github/workflows/ci.material-aio.yml
+++ b/.github/workflows/ci.material-aio.yml
@@ -1,4 +1,4 @@
-name: 'CI (material.angular.io)'
+name: 'CI (material.angular.dev)'
 
 on:
   push:
@@ -49,7 +49,7 @@ jobs:
         if: always()
         with:
           name: test-logs
-          path: material.angular.io/bazel-testlogs/
+          path: material.angular.dev/bazel-testlogs/
           retention-days: 14
 
   lighthouse:
@@ -70,5 +70,5 @@ jobs:
         if: always()
         with:
           name: lighthouse-logs
-          path: material.angular.io/bazel-testlogs/
+          path: material.angular.dev/bazel-testlogs/
           retention-days: 14
diff --git a/.github/workflows/pr.material-aio.yml b/.github/workflows/pr.material-aio.yml
index 59b8ee2777a3..c194d2f51f86 100644
--- a/.github/workflows/pr.material-aio.yml
+++ b/.github/workflows/pr.material-aio.yml
@@ -1,4 +1,4 @@
-name: 'PR (material.angular.io)'
+name: 'PR (material.angular.dev)'
 
 on:
   pull_request:
@@ -47,7 +47,7 @@ jobs:
         if: always()
         with:
           name: test-logs
-          path: material.angular.io/bazel-testlogs/
+          path: material.angular.dev/bazel-testlogs/
           retention-days: 14
 
   lighthouse:
@@ -68,5 +68,5 @@ jobs:
         if: always()
         with:
           name: lighthouse-logs
-          path: material.angular.io/bazel-testlogs/
+          path: material.angular.dev/bazel-testlogs/
           retention-days: 14
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f4828f2f8de5..e74c8c138679 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3324,7 +3324,7 @@ Andy Chrzaszcz, Bobby Galli, Joey Perrott, Kristiyan Kostadinov, Miles Malerba,
   - `mat-tabs`
 - The TypeScript API should remain largely unchanged, but the DOM and CSS classes for these components have changed.
 - See the MDC migration guide for more information about the changes and
-  how to migrate your app: https://material.angular.io/guide/mdc-migration.
+  how to migrate your app: https://material.angular.dev/guide/mdc-migration.
 - Buttons inside the datepicker popup and datepicker toggle now use the
   MDC-based button implementation. They have different CSS classes and
   styles, so custom style overrides may need to be updated.
@@ -6163,4 +6163,4 @@ _Breaking changes:_
 
 # Changes Prior to 12.0.0
 
-To view changes that occurred prior to 12.0.0, see [CHANGELOG_ARCHIVE.md](https://github.com/angular/components/blob/main/CHANGELOG_ARCHIVE.md).
\ No newline at end of file
+To view changes that occurred prior to 12.0.0, see [CHANGELOG_ARCHIVE.md](https://github.com/angular/components/blob/main/CHANGELOG_ARCHIVE.md).
diff --git a/CHANGELOG_ARCHIVE.md b/CHANGELOG_ARCHIVE.md
index 9de1841eee84..19ab29f157a7 100644
--- a/CHANGELOG_ARCHIVE.md
+++ b/CHANGELOG_ARCHIVE.md
@@ -1891,8 +1891,8 @@ And the same test with harnesses:
 ```
 
 Learn more about
-[Angular Material's component harnesses](https://material.angular.io/guide/using-component-harnesses)
-or [building your own with the CDK](https://v9.material.angular.io/cdk/testing/overview).
+[Angular Material's component harnesses](https://material.angular.dev/guide/using-component-harnesses)
+or [building your own with the CDK](https://v9.material.angular.dev/cdk/testing/overview).
 
 #### New `@angular/google-maps` package!
 
@@ -1911,7 +1911,7 @@ Big thanks to @mbehrlich for contributing this!
 #### New `cdk/clipboard` subpackage containing helpers for working with the clipboard.
 
 This new capability for `@angular/cdk` provides some convenient helpers for dealign with
-the clipboard. [See the documentation for more information](https://material.angular.io/cdk/clipboard).
+the clipboard. [See the documentation for more information](https://material.angular.dev/cdk/clipboard).
 
 Big thanks to @xkxx for contributing this!
 
@@ -3242,8 +3242,8 @@ It was always required, but is now correctly listed in the `package.json`.
 
 ### Highlights
 
-* Support for [Drag and Drop](https://material.angular.io/cdk/drag-drop/overview) in `@angular/cdk/drag-drop`.
-* Support for [Virtual Scrolling](https://material.angular.io/cdk/scrolling/overview) in `@angular/cdk/scrolling`.
+* Support for [Drag and Drop](https://material.angular.dev/cdk/drag-drop/overview) in `@angular/cdk/drag-drop`.
+* Support for [Virtual Scrolling](https://material.angular.dev/cdk/scrolling/overview) in `@angular/cdk/scrolling`.
 * Support for native `<select>` element in `<mat-form-field>` .
 * Added `<mat-action-list>`, a list where each item is a `<button>`.
 * Updated component styles throughout the library matching the 2018 Material Design Spec refresh.
@@ -4334,18 +4334,18 @@ You can view a beta version of the docs at https://beta-angular-material-io.fire
 
 ### Highlights
 
-* [`MatTree`](https://material.angular.io/components/tree/overview) component is now available, [@tinayuangao](https://github.com/tinayuangao) recently gave a [talk at ng-conf about the new component](https://www.youtube.com/watch?v=s0Vy3sLbeyA)
-* `<mat-table>` and `<cdk-table>` now native [`<table>` elements](https://material.angular.io/components/table/overview#applying-material-styles-to-native-table) in addition to the existing [`display: flex` based layout](https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-)
-* `MatTable` now supports having an optional [footer row](https://material.angular.io/components/table/overview#footer_row)
-* [Schematics](https://material.angular.io/guides/schematics) are now available for Angular Material, [@jelbourn](https://github.com/jelbourn) recently gave a [talk at ng-conf about using schematics](https://www.youtube.com/watch?v=v__RuD9RX3I)
-* `MatTabs` content can now be [lazy loaded](https://material.angular.io/components/tabs/overview#lazy_loading)
-* [`MatBadge`](https://material.angular.io/components/badge/overview) and [`MatBottomSheet`](https://material.angular.io/components/bottom-sheet/overview) components are now available
-* `@angular/cdk/overlay` has a new positioning strategy available, [`FlexibleConnectedPositionStrategy`](https://material.angular.io/cdk/overlay/overview#position-strategies), which intelligently handles sizing and positioning to ensure that overlay contents always remain on the screen
+* [`MatTree`](https://material.angular.dev/components/tree/overview) component is now available, [@tinayuangao](https://github.com/tinayuangao) recently gave a [talk at ng-conf about the new component](https://www.youtube.com/watch?v=s0Vy3sLbeyA)
+* `<mat-table>` and `<cdk-table>` now native [`<table>` elements](https://material.angular.dev/components/table/overview#applying-material-styles-to-native-table) in addition to the existing [`display: flex` based layout](https://material.angular.dev/components/table/overview#tables-with-code-display-flex-code-)
+* `MatTable` now supports having an optional [footer row](https://material.angular.dev/components/table/overview#footer_row)
+* [Schematics](https://material.angular.dev/guides/schematics) are now available for Angular Material, [@jelbourn](https://github.com/jelbourn) recently gave a [talk at ng-conf about using schematics](https://www.youtube.com/watch?v=v__RuD9RX3I)
+* `MatTabs` content can now be [lazy loaded](https://material.angular.dev/components/tabs/overview#lazy_loading)
+* [`MatBadge`](https://material.angular.dev/components/badge/overview) and [`MatBottomSheet`](https://material.angular.dev/components/bottom-sheet/overview) components are now available
+* `@angular/cdk/overlay` has a new positioning strategy available, [`FlexibleConnectedPositionStrategy`](https://material.angular.dev/cdk/overlay/overview#position-strategies), which intelligently handles sizing and positioning to ensure that overlay contents always remain on the screen
 * `MatIcon` now allows SVG icons to be registered from strings
 * `@angular/cdk/keycodes` now includes most keycodes you might need for building a web application
 * 130+ bug fixes
-* Docs for v5 are now available at [v5.material.angular.io](https://v5.material.angular.io)
-* A version picker is available [material.angular.io](https://material.angular.io) to switch between docs versions
+* Docs for v5 are now available at [v5.material.angular.dev](https://v5.material.angular.dev)
+* A version picker is available [material.angular.dev](https://material.angular.dev) to switch between docs versions
 
 
 ### Upgrading to Angular Material 6.0
@@ -5526,7 +5526,7 @@ rather than being based on the existing config object.
 * **tabs:** fix accidentally setting `top` instead of `width` after removing Renderer use ([#8602](https://github.com/angular/material2/issues/8602)) ([6e865b7](https://github.com/angular/material2/commit/6e865b7))
 
 ### Features
-* The examples on [material.angular.io](https://material.angular.io) are now opened externally via
+* The examples on [material.angular.dev](https://material.angular.dev) are now opened externally via
 StackBlitz instead of Plunker.
 
 <!-- CHANGELOG SPLIT MARKER -->
@@ -5572,7 +5572,7 @@ StackBlitz instead of Plunker.
 * consistently coerce boolean and number properties ([#7283](https://github.com/angular/material2/issues/7283)) ([3ca801a](https://github.com/angular/material2/commit/3ca801a))
 * replace extendObject utility w/ object spread ([#7372](https://github.com/angular/material2/issues/7372)) ([ea54edb](https://github.com/angular/material2/commit/ea54edb))
 * using correct global name in rollup bundle ([#8407](https://github.com/angular/material2/issues/8407)) ([40be1f2](https://github.com/angular/material2/commit/40be1f2))
-* TypeScript interfaces are now documented on https://material.angular.io
+* TypeScript interfaces are now documented on https://material.angular.dev
 
 ### Features
 
@@ -6350,7 +6350,7 @@ initial release, code from Angular Material's `core/` have been moved for `a11y/
 re-exports these symbols, marked as deprecated. The re-exports will be removed in a subsequent
 release.
 * Initial version of data-table component. There is both a `<cdk-table>` (the core) and the
-`<md-table>` (with Material Design styles). See the documentation on material.angular.io for more
+`<md-table>` (with Material Design styles). See the documentation on material.angular.dev for more
 information.
 * Initial version of `<md-paginator>` and `<md-sort-header>` components, which can be used either
 with `<md-table>` or any other table.
diff --git a/CODING_STANDARDS.md b/CODING_STANDARDS.md
index f0dbdd2dd614..002dc7640d86 100644
--- a/CODING_STANDARDS.md
+++ b/CODING_STANDARDS.md
@@ -162,7 +162,7 @@ three lines, introduce a new method to contain the logic.
 #### JsDoc comments
 
 All public APIs must have user-facing comments. These are extracted and shown in the documentation
-on [material.angular.io](https://material.angular.io).
+on [material.angular.dev](https://material.angular.dev).
 
 Private and internal APIs should have JsDoc when they are not obvious. Ultimately it is the purview
 of the code reviewer as to what is "obvious", but the rule of thumb is that *most* classes,
diff --git a/README.md b/README.md
index 6bdf2a32db88..0860e993e50e 100644
--- a/README.md
+++ b/README.md
@@ -68,11 +68,11 @@ We aim for great user experience with the following screen readers:
 [Material Design]: https://material.io
 [Google Maps JavaScript API]: https://developers.google.com/maps/documentation/javascript/tutorial
 [YouTube Player API]: https://developers.google.com/youtube/iframe_api_reference
-[cdk-docs]: https://material.angular.io/cdk/categories
-[mat-docs]: https://material.angular.io
+[cdk-docs]: https://material.angular.dev/cdk/categories
+[mat-docs]: https://material.angular.dev
 [map-docs]: https://github.com/angular/components/blob/main/src/google-maps/README.md
 [ytp-docs]: https://github.com/angular/components/blob/main/src/youtube-player/README.md
-[getting-started]: https://material.angular.io/guide/getting-started
+[getting-started]: https://material.angular.dev/guide/getting-started
 [contributing]: https://github.com/angular/components/blob/main/CONTRIBUTING.md
 [help-wanted]: https://github.com/angular/components/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22
 [good-first-issue]: https://github.com/angular/components/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22+label%3A%22good+first+issue%22
diff --git a/docs/README.md b/docs/README.md
index 7ae7ea6d25ce..e1073d134859 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,16 +1,16 @@
 # Angular Components Docs Site
 
-This is the repository for the [Angular Components documentation site](https://material.angular.io/).
+This is the repository for the [Angular Components documentation site](https://material.angular.dev/).
 
 Versions of this site are also available for
-- [v5](https://v5.material.angular.io/)
-- [v6](https://v6.material.angular.io/)
-- [v7](https://v7.material.angular.io/)
-- [v8](https://v8.material.angular.io/)
-- [v9](https://v9.material.angular.io/)
-- [v10](https://v10.material.angular.io/)
-- [v11](https://v11.material.angular.io/)
-- [v12](https://material.angular.io/)
+- [v5](https://v5.material.angular.dev/)
+- [v6](https://v6.material.angular.dev/)
+- [v7](https://v7.material.angular.dev/)
+- [v8](https://v8.material.angular.dev/)
+- [v9](https://v9.material.angular.dev/)
+- [v10](https://v10.material.angular.dev/)
+- [v11](https://v11.material.angular.dev/)
+- [v12](https://material.angular.dev/)
 
 ## Contributing
 
@@ -19,7 +19,7 @@ contents, API docs, and demos in the
 [Angular Components repo](https://github.com/angular/components/issues).
 
 Please only open issues with the documentation site itself (not the content) in
-[this repo](https://github.com/angular/material.angular.io/issues). This includes issues like the
+[this repo](https://github.com/angular/material.angular.dev/issues). This includes issues like the
 navigation not working properly, examples or documentation not being presented in an accessible way,
 issues with rendering or layout of the documentation pages, etc.
 
diff --git a/docs/src/app/shared/doc-viewer/doc-viewer.spec.ts b/docs/src/app/shared/doc-viewer/doc-viewer.spec.ts
index 947d8fe5353c..d8ccc111b343 100644
--- a/docs/src/app/shared/doc-viewer/doc-viewer.spec.ts
+++ b/docs/src/app/shared/doc-viewer/doc-viewer.spec.ts
@@ -62,7 +62,7 @@ describe('DocViewer', () => {
 
   it('should correct hash based links', () => {
     const fixture = TestBed.createComponent(DocViewerTestComponent);
-    fixture.componentInstance.documentUrl = `http://material.angular.io/doc-with-links.html`;
+    fixture.componentInstance.documentUrl = `http://material.angular.dev/doc-with-links.html`;
     fixture.detectChanges();
 
     const url = fixture.componentInstance.documentUrl;
@@ -75,7 +75,7 @@ describe('DocViewer', () => {
 
   it('should preserve document element ids', () => {
     const fixture = TestBed.createComponent(DocViewerTestComponent);
-    const testUrl = 'http://material.angular.io/doc-with-element-ids.html';
+    const testUrl = 'http://material.angular.dev/doc-with-element-ids.html';
 
     fixture.componentInstance.documentUrl = testUrl;
     fixture.detectChanges();
@@ -88,7 +88,7 @@ describe('DocViewer', () => {
 
   it('should instantiate example viewer in snippet view with region', () => {
     const fixture = TestBed.createComponent(DocViewerTestComponent);
-    const testUrl = 'http://material.angular.io/snippet-example.html';
+    const testUrl = 'http://material.angular.dev/snippet-example.html';
 
     fixture.componentInstance.documentUrl = testUrl;
     fixture.detectChanges();
@@ -104,7 +104,7 @@ describe('DocViewer', () => {
 
   it('should instantiate example viewer in demo view', () => {
     const fixture = TestBed.createComponent(DocViewerTestComponent);
-    const testUrl = 'http://material.angular.io/demo-example.html';
+    const testUrl = 'http://material.angular.dev/demo-example.html';
 
     fixture.componentInstance.documentUrl = testUrl;
     fixture.detectChanges();
@@ -119,7 +119,7 @@ describe('DocViewer', () => {
 
   it('should instantiate example viewer in snippet view with whole snippet', () => {
     const fixture = TestBed.createComponent(DocViewerTestComponent);
-    const testUrl = 'http://material.angular.io/whole-snippet-example.html';
+    const testUrl = 'http://material.angular.dev/whole-snippet-example.html';
 
     fixture.componentInstance.documentUrl = testUrl;
     fixture.detectChanges();
@@ -142,7 +142,7 @@ describe('DocViewer', () => {
     const url = fixture.componentInstance.documentUrl;
     http.expectOne(url).flush(FAKE_DOCS[url]);
 
-    const errorUrl = 'http://material.angular.io/error-doc.html';
+    const errorUrl = 'http://material.angular.dev/error-doc.html';
 
     fixture.componentInstance.documentUrl = errorUrl;
     fixture.detectChanges();
@@ -151,14 +151,14 @@ describe('DocViewer', () => {
 
     expect(docViewer).not.toBeNull();
     expect(docViewer.nativeElement.innerHTML).toContain(
-      'Failed to load document: http://material.angular.io/error-doc.html',
+      'Failed to load document: http://material.angular.dev/error-doc.html',
     );
     expect(console.error).toHaveBeenCalledTimes(1);
   });
 
   it('should show tooltip for deprecated symbol', () => {
     const fixture = TestBed.createComponent(DocViewerTestComponent);
-    fixture.componentInstance.documentUrl = `http://material.angular.io/deprecated.html`;
+    fixture.componentInstance.documentUrl = `http://material.angular.dev/deprecated.html`;
     fixture.detectChanges();
 
     const url = fixture.componentInstance.documentUrl;
@@ -188,7 +188,7 @@ describe('DocViewer', () => {
 
   it('should show copy icon button for module imports', () => {
     const fixture = TestBed.createComponent(DocViewerTestComponent);
-    fixture.componentInstance.documentUrl = `http://material.angular.io/copy-module-import.html`;
+    fixture.componentInstance.documentUrl = `http://material.angular.dev/copy-module-import.html`;
     fixture.detectChanges();
 
     const url = fixture.componentInstance.documentUrl;
@@ -216,24 +216,24 @@ describe('DocViewer', () => {
   imports: [DocViewer],
 })
 class DocViewerTestComponent {
-  documentUrl = 'http://material.angular.io/simple-doc.html';
+  documentUrl = 'http://material.angular.dev/simple-doc.html';
 }
 
 const FAKE_DOCS: {[key: string]: string} = {
-  'http://material.angular.io/simple-doc.html': '<div>my docs page</div>',
-  'http://material.angular.io/doc-with-example.html': `
+  'http://material.angular.dev/simple-doc.html': '<div>my docs page</div>',
+  'http://material.angular.dev/doc-with-example.html': `
       <div>Check out this example:</div>
       <div material-docs-example="some-example"></div>`,
-  'http://material.angular.io/doc-with-links.html': `<a href="#test">Test link</a>`,
-  'http://material.angular.io/doc-with-element-ids.html': `<h4 id="my-header">Header</h4>`,
-  'http://material.angular.io/snippet-example.html':
+  'http://material.angular.dev/doc-with-links.html': `<a href="#test">Test link</a>`,
+  'http://material.angular.dev/doc-with-element-ids.html': `<h4 id="my-header">Header</h4>`,
+  'http://material.angular.dev/snippet-example.html':
     '<div material-docs-example="some-example" file="some-example.html"' +
     ' region="some-region"></div>',
-  'http://material.angular.io/demo-example.html':
+  'http://material.angular.dev/demo-example.html':
     '<div material-docs-example="demo-example"></div>',
-  'http://material.angular.io/whole-snippet-example.html':
+  'http://material.angular.dev/whole-snippet-example.html':
     '<div material-docs-example="whole-snippet-example" file="whole-snippet-example.ts"></div>',
-  'http://material.angular.io/deprecated.html': `<div class="docs-api-class-deprecated-marker"
+  'http://material.angular.dev/deprecated.html': `<div class="docs-api-class-deprecated-marker"
         deprecated-message="deprecated class">Deprecated</div>
 
       <div class="docs-api-constant-deprecated-marker"
@@ -247,7 +247,7 @@ const FAKE_DOCS: {[key: string]: string} = {
 
       <div class="docs-api-deprecated-marker"
         deprecated-message="deprecated">Deprecated</div>`,
-  'http://material.angular.io/copy-module-import.html': `<div class="docs-api-module">
+  'http://material.angular.dev/copy-module-import.html': `<div class="docs-api-module">
       <p class="docs-api-module-import">
         <code>
           import {MatIconModule} from '@angular/material/icon';
diff --git a/docs/src/app/shared/navbar/navbar.ts b/docs/src/app/shared/navbar/navbar.ts
index 126bcd103582..a1b4d42d8679 100644
--- a/docs/src/app/shared/navbar/navbar.ts
+++ b/docs/src/app/shared/navbar/navbar.ts
@@ -39,7 +39,7 @@ export class NavBar implements OnDestroy {
   private _navigationFocusService = inject(NavigationFocusService);
 
   private _subscriptions = new Subscription();
-  isNextVersion = location.hostname === 'next.material.angular.io';
+  isNextVersion = location.hostname === 'next.material.angular.dev';
   skipLinkHref: string | null | undefined;
   skipLinkHidden = true;
 
diff --git a/docs/src/app/shared/stack-blitz/stack-blitz-writer.ts b/docs/src/app/shared/stack-blitz/stack-blitz-writer.ts
index 74538ff821a3..8390451cbe67 100644
--- a/docs/src/app/shared/stack-blitz/stack-blitz-writer.ts
+++ b/docs/src/app/shared/stack-blitz/stack-blitz-writer.ts
@@ -89,7 +89,7 @@ export class StackBlitzWriter {
         this._openStackBlitz({
           files,
           title: `Angular Components - ${data.description}`,
-          description: `${data.description}\n\nAuto-generated from: https://material.angular.io`,
+          description: `${data.description}\n\nAuto-generated from: https://material.angular.dev`,
           openFile: exampleMainFile,
         });
       };
diff --git a/docs/src/assets/versions.json b/docs/src/assets/versions.json
index 40f87d9b49d3..743dfd29058c 100644
--- a/docs/src/assets/versions.json
+++ b/docs/src/assets/versions.json
@@ -1,38 +1,38 @@
 [
   {
-    "url": "https://material.angular.io/",
+    "url": "https://material.angular.dev/",
     "title": "13.3.0"
   },
   {
-    "url": "https://v12.material.angular.io/",
+    "url": "https://v12.material.angular.dev/",
     "title": "12.2.13"
   },
   {
-    "url": "https://v11.material.angular.io/",
+    "url": "https://v11.material.angular.dev/",
     "title": "11.2.13"
   },
   {
-    "url": "https://v10.material.angular.io/",
+    "url": "https://v10.material.angular.dev/",
     "title": "10.2.7"
   },
   {
-    "url": "https://v9.material.angular.io/",
+    "url": "https://v9.material.angular.dev/",
     "title": "9.2.4"
   },
   {
-    "url": "https://v8.material.angular.io/",
+    "url": "https://v8.material.angular.dev/",
     "title": "8.2.3"
   },
   {
-    "url": "https://v7.material.angular.io/",
+    "url": "https://v7.material.angular.dev/",
     "title": "7.3.7"
   },
   {
-    "url": "https://v6.material.angular.io/",
+    "url": "https://v6.material.angular.dev/",
     "title": "6.4.7"
   },
   {
-    "url": "https://v5.material.angular.io/",
+    "url": "https://v5.material.angular.dev/",
     "title": "5.2.5"
   }
 ]
diff --git a/docs/src/index.html b/docs/src/index.html
index 0a538d1831c5..e4a8a63a93b4 100644
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>Angular Material UI Component Library</title>
-  <link rel="canonical" href="https://material.angular.io">
+  <link rel="canonical" href="https://material.angular.dev">
   <base href="/">
 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -21,17 +21,17 @@
   <meta name="twitter:creator" content="@Angular" />
   <meta name="twitter:title" content="Angular Material" />
   <meta name="twitter:description" content="UI component infrastructure and Material Design components for Angular web applications." />
-  <meta name="twitter:image" content="https://material.angular.io/assets/img/site-preview.png">
+  <meta name="twitter:image" content="https://material.angular.dev/assets/img/site-preview.png">
 
   <!--Facebook Open Graph-->
-  <meta property="og:url" content="https://material.angular.io/" />
+  <meta property="og:url" content="https://material.angular.dev/" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="Angular Material" />
   <meta property="og:site_name" content="Angular Material">
   <meta property="og:locale" content="en_US">
   <meta property="og:description" content="UI component infrastructure and Material Design components for Angular web applications." />
-  <meta property="og:image" content="https://material.angular.io/assets/img/site-preview.png" />
-  <meta property="og:image:secure_url" content="https://material.angular.io/assets/img/site-preview.png" />
+  <meta property="og:image" content="https://material.angular.dev/assets/img/site-preview.png" />
+  <meta property="og:image:secure_url" content="https://material.angular.dev/assets/img/site-preview.png" />
   <meta property="og:image:type" content="image/png">
   <meta property="og:image:width" content="1339" />
   <meta property="og:image:height" content="943" />
@@ -53,9 +53,9 @@
       "@type": "WebApplication",
       "name": "Angular Material",
       "description": "UI component infrastructure and Material Design components for Angular web applications.",
-      "url": "https://material.angular.io",
-      "image": "https://material.angular.io/assets/img/site-preview.png",
-      "screenshot": "https://material.angular.io/assets/img/site-preview.png",
+      "url": "https://material.angular.dev",
+      "image": "https://material.angular.dev/assets/img/site-preview.png",
+      "screenshot": "https://material.angular.dev/assets/img/site-preview.png",
       "applicationCategory": "Software Documentation",
       "operatingSystem": "Android, Chrome OS, iOS, iPadOS, macOS, OS X, Linux, Windows",
       "author": {
diff --git a/docs/src/robots.txt b/docs/src/robots.txt
index 0e560a10b747..2edb8fe702ff 100644
--- a/docs/src/robots.txt
+++ b/docs/src/robots.txt
@@ -1,3 +1,3 @@
-Sitemap: https://material.angular.io/sitemap.xml
+Sitemap: https://material.angular.dev/sitemap.xml
 User-agent: *
 Disallow:
diff --git a/docs/src/sitemap.xml b/docs/src/sitemap.xml
index 75ed1259c80e..7c9684cac4fc 100644
--- a/docs/src/sitemap.xml
+++ b/docs/src/sitemap.xml
@@ -6,22 +6,22 @@
             http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
 
   <url>
-    <loc>https://material.angular.io</loc>
+    <loc>https://material.angular.dev</loc>
     <changefreq>yearly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
-    <loc>https://material.angular.io/guides</loc>
+    <loc>https://material.angular.dev/guides</loc>
     <changefreq>monthly</changefreq>
     <priority>0.9</priority>
   </url>
   <url>
-    <loc>https://material.angular.io/components/categories</loc>
+    <loc>https://material.angular.dev/components/categories</loc>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
-    <loc>https://material.angular.io/cdk/categories</loc>
+    <loc>https://material.angular.dev/cdk/categories</loc>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
   </url>
diff --git a/docs/tools/audit-docs.js b/docs/tools/audit-docs.js
index df206e8df42e..c9772bec1302 100644
--- a/docs/tools/audit-docs.js
+++ b/docs/tools/audit-docs.js
@@ -13,8 +13,8 @@
  *
  *  <deploy-dir> is a path to a directory which should be served and tested.
  *
- * `<url>` is the origin (scheme + hostname + port) of an material.angular.io
- *  deployment. It can be remote (e.g. `https://next.material.angular.io`) or local (e.g.
+ * `<url>` is the origin (scheme + hostname + port) of an material.angular.dev
+ *  deployment. It can be remote (e.g. `https://next.material.angular.dev`) or local (e.g.
  *  `http://localhost:4200`).
  *
  * `<delay>` is a millisecond value used with `setTimeout()` to allow a configurable delay
diff --git a/guides/creating-a-custom-form-field-control.md b/guides/creating-a-custom-form-field-control.md
index 3911d17073ab..947e54f24a13 100644
--- a/guides/creating-a-custom-form-field-control.md
+++ b/guides/creating-a-custom-form-field-control.md
@@ -94,7 +94,7 @@ export class MyTelInput implements MatFormFieldControl<MyTel> {
 This sets up our component, so it can work with `<mat-form-field>`, but now we need to implement the
 various methods and properties declared by the interface we just implemented. To learn more about
 the `MatFormFieldControl` interface, see the
-[form field API documentation](https://material.angular.io/components/form-field/api).
+[form field API documentation](https://material.angular.dev/components/form-field/api).
 
 ### Implementing the methods and properties of MatFormFieldControl
 
diff --git a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
index 04643e01487a..1df71a48d1fa 100644
--- a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
+++ b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
@@ -1,6 +1,6 @@
 # Creating a custom stepper using the CDK stepper
 
-The [CDK stepper](https://material.angular.io/cdk/stepper/overview) allows to build a custom stepper which you can completely style yourself without any specific Material Design styling.
+The [CDK stepper](https://material.angular.dev/cdk/stepper/overview) allows to build a custom stepper which you can completely style yourself without any specific Material Design styling.
 
 In this guide, we'll learn how we can build our own custom stepper using the CDK stepper. Here is what we'll build by the end of this guide:
 
@@ -28,7 +28,7 @@ export class CustomStepperComponent extends CdkStepper {
 }
 ```
 
-After we've extended our component class from `CdkStepper` we can now access different properties from this class like `linear`, `selectedIndex` and `steps` which are defined in the [API documentation](https://material.angular.io/cdk/stepper/api#CdkStepper).
+After we've extended our component class from `CdkStepper` we can now access different properties from this class like `linear`, `selectedIndex` and `steps` which are defined in the [API documentation](https://material.angular.dev/cdk/stepper/api#CdkStepper).
 
 This is the HTML template of our custom stepper component:
 
diff --git a/guides/getting-started.md b/guides/getting-started.md
index df535d554077..623f456a82e4 100644
--- a/guides/getting-started.md
+++ b/guides/getting-started.md
@@ -15,17 +15,17 @@ ng add @angular/material
 ```
 
 The `ng add` command will install Angular Material, the
-[Component Dev Kit (CDK)](https://material.angular.io/cdk/categories),
+[Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories),
 [Angular Animations](https://angular.dev/guide/animations) and ask you the following questions to
 determine which features to include:
 
 1. Choose a prebuilt theme name, or "custom" for a custom theme:
 
-   You can choose from [prebuilt material design themes](https://material.angular.io/guide/theming#pre-built-themes) or set up an extensible [custom theme](https://material.angular.io/guide/theming#defining-a-theme).
+   You can choose from [prebuilt material design themes](https://material.angular.dev/guide/theming#pre-built-themes) or set up an extensible [custom theme](https://material.angular.dev/guide/theming#defining-a-theme).
 
 2. Set up global Angular Material typography styles:
 
-   Whether to apply the global [typography](https://material.angular.io/guide/typography) styles to your application.
+   Whether to apply the global [typography](https://material.angular.dev/guide/typography) styles to your application.
 
 The `ng add` command will additionally perform the following actions:
 
@@ -74,5 +74,5 @@ Then point your browser to [http://localhost:4200](http://localhost:4200)
 You should see the Material slide toggle component on the page.
 
 In addition to the installation schematic, Angular Material comes with
-[several other schematics](https://material.angular.io/guide/schematics) (like nav, table,
+[several other schematics](https://material.angular.dev/guide/schematics) (like nav, table,
 address-form, etc.) that can be used to easily generate pre-built components in your application.
diff --git a/guides/material-2.md b/guides/material-2.md
index 5a908afd6c7c..20eda3f8f900 100644
--- a/guides/material-2.md
+++ b/guides/material-2.md
@@ -17,9 +17,9 @@ see [Angular Material Typography][mat-typography]. For guidance on building comp
 customizable with this system, see [Theming your own components][theme-your-own].
 
 [material-design-theming]: https://m2.material.io/design/material-theming/overview.html
-[theming]: https://material.angular.io/guide/theming
-[mat-typography]: https://material.angular.io/guide/typography
-[theme-your-own]: https://material.angular.io/guide/theming-your-components
+[theming]: https://material.angular.dev/guide/theming
+[mat-typography]: https://material.angular.dev/guide/typography
+[theme-your-own]: https://material.angular.dev/guide/theming-your-components
 
 ### Sass
 
@@ -909,7 +909,7 @@ The following example demonstrates usage of the typography styles emitted by the
 #### Reading typography values from a config
 
 It is possible to read typography properties from a theme for use in your own components. For more
-information about this see our section on [Theming your own components](https://material.angular.io/guide/material-2-theming#theming-your-components),
+information about this see our section on [Theming your own components](https://material.angular.dev/guide/material-2-theming#theming-your-components),
 
 ### Step-by-step example
 
@@ -1073,7 +1073,7 @@ removed.
 The simplest way to accomplish this is by checking the theme version and emitting different styles
 for M2 vs M3. You can check the theme version using the `get-theme-version` function from
 `@angular/material`. The function will return `0` for an M2 theme or `1` for an M3 theme (see
-[theme your own components using a Material 3 theme](https://material.angular.io/guide/theming#theme-your-own-components-using-a-material-3-theme)
+[theme your own components using a Material 3 theme](https://material.angular.dev/guide/theming#theme-your-own-components-using-a-material-3-theme)
 for how to read values from an M3 theme).
 
 ```scss
diff --git a/guides/schematics.md b/guides/schematics.md
index 91952428d073..c8c351074768 100644
--- a/guides/schematics.md
+++ b/guides/schematics.md
@@ -8,7 +8,7 @@ creating Material applications easier.
 Schematics are included with both `@angular/cdk` and `@angular/material`. Once you install the npm
 packages, they will be available through the Angular CLI.
 
-Using the command below will install Angular Material, the [Component Dev Kit](https://material.angular.io/cdk) (CDK),
+Using the command below will install Angular Material, the [Component Dev Kit](https://material.angular.dev/cdk) (CDK),
 and [Angular Animations](https://angular.dev/guide/animations) in your project. Then it will run the
 installation schematic.
 
@@ -16,7 +16,7 @@ installation schematic.
 ng add @angular/material
 ```
 
-In case you just want to install the `@angular/cdk`, there are also schematics for the [Component Dev Kit](https://material.angular.io/cdk)
+In case you just want to install the `@angular/cdk`, there are also schematics for the [Component Dev Kit](https://material.angular.dev/cdk)
 
 ```
 ng add @angular/cdk
diff --git a/guides/theming.md b/guides/theming.md
index b10fda7a0d7c..22b154549d8d 100644
--- a/guides/theming.md
+++ b/guides/theming.md
@@ -11,7 +11,7 @@ If your application depends on a version before v19, or if your application's
 theme is applied using a theme config created with `mat.define-theme`, 
 `mat.define-light-theme`, or `mat.define-dark-theme`,
 then you can refer to the theming guides at 
-[v18.material.angular.io/guides](https://v18.material.angular.io/guides).
+[v18.material.angular.dev/guides](https://v18.material.angular.dev/guides).
 
 ## Getting Started
 
@@ -365,7 +365,7 @@ information to the user:
 }
 ```
 
-See the [Theme Variables](https://material.angular.io/guide/system-variables) guide for a
+See the [Theme Variables](https://material.angular.dev/guide/system-variables) guide for a
 comprehensive list of these variables, examples of where they are used, and how
 components can depend on them.
 
diff --git a/scripts/deploy/publish-docs-content.sh b/scripts/deploy/publish-docs-content.sh
index d69cb82bd85a..f0cf313d8891 100755
--- a/scripts/deploy/publish-docs-content.sh
+++ b/scripts/deploy/publish-docs-content.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Publish material2 docs assets to the material2-docs-content repo
-# material.angular.io will pull from this assets repo to get the latest docs
+# material.angular.dev will pull from this assets repo to get the latest docs
 
 # The script should immediately exit if any command in the script fails.
 set -e
diff --git a/scripts/docs-deploy/deploy-ci-push.mts b/scripts/docs-deploy/deploy-ci-push.mts
index 1bf3cf1f9414..4ba49c6fa85e 100644
--- a/scripts/docs-deploy/deploy-ci-push.mts
+++ b/scripts/docs-deploy/deploy-ci-push.mts
@@ -34,9 +34,9 @@ async function main() {
     const targets = [{projectId, description, site: sites.next}];
 
     // If the next release train is for a new major that is not published as part of the
-    // other active release trains, we also publish to e.g. `v14.material.angular.io`.
+    // other active release trains, we also publish to e.g. `v14.material.angular.dev`.
     // Note: If both `rc` and `next` have the same major, we want the `rc` release-train
-    // to take precedence and be responsible for the `<major>.material.angular.io` deploy.
+    // to take precedence and be responsible for the `<major>.material.angular.dev` deploy.
     if (major > (active.releaseCandidate ?? active.latest).version.major) {
       targets.push({projectId, description, site: sites.forMajor(major)});
     }
@@ -72,9 +72,9 @@ async function main() {
     const targets = [{projectId, description, site: sites.rc}];
 
     // If the RC is for a new major that `latest` does not publish yet, we will deploy
-    // the dedicated major site like `v13.material.angular.io` using the `rc` branch.
+    // the dedicated major site like `v13.material.angular.dev` using the `rc` branch.
     // Note: If both `rc` and `next` have the same major, we want the `rc` release-train
-    // to take precedence and be responsible for the `<major>.material.angular.io` deploy.
+    // to take precedence and be responsible for the `<major>.material.angular.dev` deploy.
     if (major > active.latest.version.major) {
       targets.push({projectId, description, site: sites.forMajor(major)});
     }
@@ -96,7 +96,7 @@ async function main() {
 
   // The `branchesForMajor` array will hold the most recent version branch for current major.
   // If the latest branch does not match the current one, we know that this is not the
-  // most recent minor and should not be re-deployed to e.g. `<major>.material.angular.io`.
+  // most recent minor and should not be re-deployed to e.g. `<major>.material.angular.dev`.
   if (branchesForMajor[0].name !== branchName) {
     console.log(
       `Skipping deployment as version branch is not the most recent ` +
diff --git a/scripts/docs-deploy/snapshot-deploy.mts b/scripts/docs-deploy/snapshot-deploy.mts
index e326fe5440c8..faa2dba763a2 100644
--- a/scripts/docs-deploy/snapshot-deploy.mts
+++ b/scripts/docs-deploy/snapshot-deploy.mts
@@ -20,7 +20,7 @@ export type DeploymentConfig = {
  * One downside is that the docs site might be ahead of what is available
  * on NPM, potentially causing examples to not work in StackBlitz. These should
  * never break though since the stable release train is supposed to never receive
- * breaking changes (i.e. `material.angular.io` Stackblitz should work as expected).
+ * breaking changes (i.e. `material.angular.dev` Stackblitz should work as expected).
  *
  * Building based on the NPM packages would result in some inevitable complexity.
  * For example: we would know that `13.2.0` is our latest release. We would need
diff --git a/scripts/docs-deploy/utils.mts b/scripts/docs-deploy/utils.mts
index 3e9607f19d14..83c010998342 100644
--- a/scripts/docs-deploy/utils.mts
+++ b/scripts/docs-deploy/utils.mts
@@ -17,12 +17,12 @@ export class SiteTarget {
 
 /** Object capturing all site targets for the docs-app. */
 export const sites = {
-  stable: new SiteTarget('latest-material-angular-io', 'https://material.angular.io'),
-  next: new SiteTarget('next-material-angular-io', 'https://next.material.angular.io'),
-  rc: new SiteTarget('rc-material-angular-io', 'https://rc.material.angular.io'),
+  stable: new SiteTarget('latest-material-angular-io', 'https://material.angular.dev'),
+  next: new SiteTarget('next-material-angular-io', 'https://next.material.angular.dev'),
+  rc: new SiteTarget('rc-material-angular-io', 'https://rc.material.angular.dev'),
 
   forMajor: (major: number) =>
-    new SiteTarget(`v${major}-material-angular-io`, `https://v${major}.material.angular.io`),
+    new SiteTarget(`v${major}-material-angular-io`, `https://v${major}.material.angular.dev`),
 };
 
 /** Optional Github access token. Can be used for querying the active release trains. */
diff --git a/src/cdk/menu/menu.md b/src/cdk/menu/menu.md
index 1c43b0e6f1a2..440614930ae3 100644
--- a/src/cdk/menu/menu.md
+++ b/src/cdk/menu/menu.md
@@ -240,4 +240,4 @@ Finally, keyboard interaction is supported as defined in the [ARIA menubar keybo
 [keyboard]:
   https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-12
   'ARIA Menubar Keyboard Interaction'
-[diagram]: https://material.angular.io/assets/img/menuaim.png 'Menu Aim Diagram'
+[diagram]: https://material.angular.dev/assets/img/menuaim.png 'Menu Aim Diagram'
diff --git a/src/cdk/table/table.md b/src/cdk/table/table.md
index 3c141c9387f8..62d105ad649b 100644
--- a/src/cdk/table/table.md
+++ b/src/cdk/table/table.md
@@ -7,7 +7,7 @@ built. Because it enforces no opinions on these matters, developers have full co
 interaction patterns associated with the table.
 
 For a Material Design styled table, see the
-[documentation for `MatTable`](https://material.angular.io/components/table) which builds on
+[documentation for `MatTable`](https://material.angular.dev/components/table) which builds on
 top of the CDK data-table.
 
 <!-- example(cdk-table-basic) -->
@@ -204,5 +204,5 @@ selectors. For example, `<table cdk-table>` becomes `<cdk-table>`; `<tr cdk-row`
 ```
 
 For an example of how to render the structure as a table, see the
-[documentation for `<mat-table>`](https://material.angular.io/components/table) which includes
+[documentation for `<mat-table>`](https://material.angular.dev/components/table) which includes
 the style support for this approach.
diff --git a/src/cdk/testing/test-harnesses.md b/src/cdk/testing/test-harnesses.md
index 73866625591e..9025d5b0ea8a 100644
--- a/src/cdk/testing/test-harnesses.md
+++ b/src/cdk/testing/test-harnesses.md
@@ -524,7 +524,7 @@ class MyPopupHarness extends ContentContainerComponentHarness<string> {
 #### Accessing elements outside of the component's host element
 
 There are times when a component harness might need to access elements outside of its corresponding
-component's host element. Components that use [CDK overlay](https://material.angular.io/cdk/overlay/overview) serve as examples of this. The CDK overlay creates an element that is attached directly to the body, outside of the component's host element. In this case,
+component's host element. Components that use [CDK overlay](https://material.angular.dev/cdk/overlay/overview) serve as examples of this. The CDK overlay creates an element that is attached directly to the body, outside of the component's host element. In this case,
 `ComponentHarness` provides a method that can be used to get a `LocatorFactory` for the root element
 of the document. The `LocatorFactory` supports most of the same APIs as the `ComponentHarness` base
 class, and can then be used to query relative to the document's root element.
diff --git a/src/components-examples/material/card/card-media-size/card-media-size-example.html b/src/components-examples/material/card/card-media-size/card-media-size-example.html
index 891f4fde82c5..667f520484d8 100644
--- a/src/components-examples/material/card/card-media-size/card-media-size-example.html
+++ b/src/components-examples/material/card/card-media-size/card-media-size-example.html
@@ -4,7 +4,7 @@
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
       <mat-card-subtitle>Small</mat-card-subtitle>
-      <img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
+      <img mat-card-sm-image src="https://material.angular.dev/assets/img/examples/shiba2.jpg" >
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
@@ -17,7 +17,7 @@
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
       <mat-card-subtitle>Medium</mat-card-subtitle>
-      <img mat-card-md-image src="https://material.angular.io/assets/img/examples/shiba2.jpg"  alt="Image of a Shiba Inu">
+      <img mat-card-md-image src="https://material.angular.dev/assets/img/examples/shiba2.jpg"  alt="Image of a Shiba Inu">
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
@@ -30,7 +30,7 @@
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
       <mat-card-subtitle>Large</mat-card-subtitle>
-      <img mat-card-lg-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
+      <img mat-card-lg-image src="https://material.angular.dev/assets/img/examples/shiba2.jpg" >
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
@@ -43,7 +43,7 @@
     <mat-card-title-group>
       <mat-card-title>Shiba Inu</mat-card-title>
       <mat-card-subtitle>Extra large</mat-card-subtitle>
-      <img mat-card-xl-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
+      <img mat-card-xl-image src="https://material.angular.dev/assets/img/examples/shiba2.jpg" >
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
diff --git a/src/components-examples/material/card/card-overview/card-overview-example.css b/src/components-examples/material/card/card-overview/card-overview-example.css
index 943bdd1cb051..9930db5b78b0 100644
--- a/src/components-examples/material/card/card-overview/card-overview-example.css
+++ b/src/components-examples/material/card/card-overview/card-overview-example.css
@@ -3,6 +3,6 @@
 }
 
 .example-header-image {
-  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+  background-image: url('https://material.angular.dev/assets/img/examples/shiba1.jpg');
   background-size: cover;
 }
diff --git a/src/components-examples/material/card/card-overview/card-overview-example.html b/src/components-examples/material/card/card-overview/card-overview-example.html
index 4cdd3451a7cc..4617d7408291 100644
--- a/src/components-examples/material/card/card-overview/card-overview-example.html
+++ b/src/components-examples/material/card/card-overview/card-overview-example.html
@@ -4,7 +4,7 @@
     <mat-card-title>Shiba Inu</mat-card-title>
     <mat-card-subtitle>Dog Breed</mat-card-subtitle>
   </mat-card-header>
-  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
+  <img mat-card-image src="https://material.angular.dev/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
   <mat-card-content>
     <p>
       The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
@@ -16,4 +16,4 @@
     <button matButton>LIKE</button>
     <button matButton>SHARE</button>
   </mat-card-actions>
-</mat-card>
\ No newline at end of file
+</mat-card>
diff --git a/src/components-examples/material/chips/chips-avatar/chips-avatar-example.html b/src/components-examples/material/chips/chips-avatar/chips-avatar-example.html
index 7a56290eaa53..fb3b0f4c7695 100644
--- a/src/components-examples/material/chips/chips-avatar/chips-avatar-example.html
+++ b/src/components-examples/material/chips/chips-avatar/chips-avatar-example.html
@@ -2,7 +2,7 @@
   <mat-chip>
     <img
       matChipAvatar
-      src="https://material.angular.io/assets/img/examples/shiba1.jpg"
+      src="https://material.angular.dev/assets/img/examples/shiba1.jpg"
       alt="Photo of a Shiba Inu"
     />
     Dog one
@@ -10,7 +10,7 @@
   <mat-chip>
     <img
       matChipAvatar
-      src="https://material.angular.io/assets/img/examples/shiba1.jpg"
+      src="https://material.angular.dev/assets/img/examples/shiba1.jpg"
       alt="Photo of a Shiba Inu"
     />
     Dog two
@@ -18,7 +18,7 @@
   <mat-chip>
     <img
       matChipAvatar
-      src="https://material.angular.io/assets/img/examples/shiba1.jpg"
+      src="https://material.angular.dev/assets/img/examples/shiba1.jpg"
       alt="Photo of a Shiba Inu"
     />
     Dog three
diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html
index 4b4b169ba162..99726bb6fc22 100644
--- a/src/dev-app/chips/chips-demo.html
+++ b/src/dev-app/chips/chips-demo.html
@@ -68,12 +68,12 @@ <h4>With avatar, icons, and color</h4>
         </mat-chip>
 
         <mat-chip>
-          <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" matChipAvatar>
+          <img src="https://material.angular.dev/assets/img/examples/shiba2.jpg" matChipAvatar>
           Mal
         </mat-chip>
 
         <mat-chip highlighted="true" color="warn">
-          <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" matChipAvatar>
+          <img src="https://material.angular.dev/assets/img/examples/shiba2.jpg" matChipAvatar>
           Husi
           <button matChipRemove>
             <mat-icon>close</mat-icon>
diff --git a/src/dev-app/list/list-demo.html b/src/dev-app/list/list-demo.html
index af13321d0551..cf5f9538e6a2 100644
--- a/src/dev-app/list/list-demo.html
+++ b/src/dev-app/list/list-demo.html
@@ -159,12 +159,12 @@ <h2>Selection list</h2>
       <div mat-subheader>Dogs</div>
 
       <mat-list-option togglePosition="before">
-        <img matListItemAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg">
+        <img matListItemAvatar src="https://material.angular.dev/assets/img/examples/shiba1.jpg">
         <span matListItemTitle>Shiba Inu</span>
       </mat-list-option>
 
       <mat-list-option togglePosition="after">
-        <img matListItemAvatar src="https://material.angular.io/assets/img/examples/shiba2.jpg">
+        <img matListItemAvatar src="https://material.angular.dev/assets/img/examples/shiba2.jpg">
         <span matListItemTitle>Other Shiba Inu</span>
       </mat-list-option>
     </mat-selection-list>
diff --git a/src/material/autocomplete/README.md b/src/material/autocomplete/README.md
index 73bddeb68ee6..c02e254b2a0d 100644
--- a/src/material/autocomplete/README.md
+++ b/src/material/autocomplete/README.md
@@ -1 +1 @@
-See documentation on [material.angular.io](https://material.angular.io/).
\ No newline at end of file
+See documentation on [material.angular.dev](https://material.angular.dev/).
diff --git a/src/material/badge/badge.md b/src/material/badge/badge.md
index c3263b2e94df..b4f4a4146f99 100644
--- a/src/material/badge/badge.md
+++ b/src/material/badge/badge.md
@@ -51,4 +51,4 @@ badge determines interactivity based on whether the host element is focusable.
 When applying a badge to a `<mat-icon>`, it is important to know that `<mat-icon>` is
 `aria-hidden="true"` by default. If the combination of icon and badge communicates meaningful
 information, always surface this information in another way. [See the guidance on indicator
-icons for more information](https://material.angular.io/components/icon/overview#indicator-icons).
+icons for more information](https://material.angular.dev/components/icon/overview#indicator-icons).
diff --git a/src/material/badge/badge.ts b/src/material/badge/badge.ts
index 5815d5670cad..2a1745f13560 100644
--- a/src/material/badge/badge.ts
+++ b/src/material/badge/badge.ts
@@ -82,10 +82,10 @@ export class MatBadge implements OnInit, OnDestroy {
 
   /**
    * Theme color of the badge. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/badge/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/badge/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input('matBadgeColor')
   get color(): ThemePalette {
@@ -167,7 +167,7 @@ export class MatBadge implements OnInit, OnDestroy {
 
       // Heads-up for developers to avoid putting matBadge on <mat-icon>
       // as it is aria-hidden by default docs mention this at:
-      // https://material.angular.io/components/badge/overview#accessibility
+      // https://material.angular.dev/components/badge/overview#accessibility
       if (
         tagName.toLowerCase() === 'mat-icon' &&
         nativeElement.getAttribute('aria-hidden') === 'true'
diff --git a/src/material/bottom-sheet/README.md b/src/material/bottom-sheet/README.md
index ac1f4b38951a..d8a7d20fffa3 100644
--- a/src/material/bottom-sheet/README.md
+++ b/src/material/bottom-sheet/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/bottom-sheet
+Please see the official documentation at https://material.angular.dev/components/component/bottom-sheet
diff --git a/src/material/button-toggle/README.md b/src/material/button-toggle/README.md
index fb4499d1cda0..e596a6654baf 100644
--- a/src/material/button-toggle/README.md
+++ b/src/material/button-toggle/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/button-toggle
\ No newline at end of file
+Please see the official documentation at https://material.angular.dev/components/component/button-toggle
diff --git a/src/material/button/button-base.ts b/src/material/button/button-base.ts
index 20abb826c425..1c048f6bb456 100644
--- a/src/material/button/button-base.ts
+++ b/src/material/button/button-base.ts
@@ -88,10 +88,10 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
 
   /**
    * Theme color of the button. This API is supported in M2 themes only, it has
-   * no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.
+   * no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/button/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color?: string | null;
 
diff --git a/src/material/button/button.md b/src/material/button/button.md
index 76b83b2f4743..a06348334d9e 100644
--- a/src/material/button/button.md
+++ b/src/material/button/button.md
@@ -13,7 +13,7 @@ There are several button variants, each applied as an attribute:
 |----------------------|--------------------------------------------------------------------------|
 | `matButton`          | Rectangular button that can contain text and icons                       |
 | `matIconButton`      | Smaller, circular button, meant to contain an icon and no text           |
-| `matFab`             | Rectangular button w/ elevation and rounded corners, meant to contain an icon. Can be [extended](https://material.angular.io/components/button/overview#extended-fab-buttons) to a rectangle to also fit a label               |
+| `matFab`             | Rectangular button w/ elevation and rounded corners, meant to contain an icon. Can be [extended](https://material.angular.dev/components/button/overview#extended-fab-buttons) to a rectangle to also fit a label               |
 | `matMiniFab`         | Smaller variant of `matFab`                                              |
 
 
@@ -75,9 +75,9 @@ with any assistive technology your application supports.
 #### Buttons with icons
 Buttons or links containing only icons (such as `matFab`, `matMiniFab`, and `matIconButton`)
 should be given a meaningful label via `aria-label` or `aria-labelledby`. [See the documentation
-for `MatIcon`](https://material.angular.io/components/icon) for more
+for `MatIcon`](https://material.angular.dev/components/icon) for more
 information on using icons in buttons. Additionally, to be fully accessible the icon should have a minimum touch-target of 48x48 to ensure that the icon is easily clickable particularly on mobile devices and small screens.
 
 #### Toggle buttons
-[See the documentation for `MatButtonToggle`](https://material.angular.io/components/button-toggle)
+[See the documentation for `MatButtonToggle`](https://material.angular.dev/components/button-toggle)
 for information on stateful toggle buttons.
diff --git a/src/material/button/fab.ts b/src/material/button/fab.ts
index 1d694dec4103..3c908e0ea111 100644
--- a/src/material/button/fab.ts
+++ b/src/material/button/fab.ts
@@ -23,10 +23,10 @@ import {ThemePalette} from '../core';
 export interface MatFabDefaultOptions {
   /**
    * Default theme color of the button. This API is supported in M2 themes
-   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.
+   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/button/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
    */
   color?: ThemePalette;
 }
diff --git a/src/material/card/README.md b/src/material/card/README.md
index 3ddeb569b8ed..2911a4be0c6f 100644
--- a/src/material/card/README.md
+++ b/src/material/card/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/card
+Please see the official documentation at https://material.angular.dev/components/component/card
diff --git a/src/material/checkbox/README.md b/src/material/checkbox/README.md
index 9aea33411b66..b5786b93e9de 100644
--- a/src/material/checkbox/README.md
+++ b/src/material/checkbox/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/checkbox
+Please see the official documentation at https://material.angular.dev/components/component/checkbox
diff --git a/src/material/checkbox/checkbox-config.ts b/src/material/checkbox/checkbox-config.ts
index 11d5eabd71ed..984894c101cf 100644
--- a/src/material/checkbox/checkbox-config.ts
+++ b/src/material/checkbox/checkbox-config.ts
@@ -12,10 +12,10 @@ import {ThemePalette} from '../core';
 export interface MatCheckboxDefaultOptions {
   /**
    * Default theme color of the checkbox. This API is supported in M2 themes
-   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.
+   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/checkbox/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
 
diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts
index c936bc0083e6..6bd715026743 100644
--- a/src/material/checkbox/checkbox.ts
+++ b/src/material/checkbox/checkbox.ts
@@ -220,10 +220,10 @@ export class MatCheckbox
   // the lack of type checking previously and assigning random strings.
   /**
    * Theme color of the checkbox. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/checkbox/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: string | undefined;
 
diff --git a/src/material/chips/README.md b/src/material/chips/README.md
index a2c8db6cb8a9..f1166c8a38a9 100644
--- a/src/material/chips/README.md
+++ b/src/material/chips/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/chips
+Please see the official documentation at https://material.angular.dev/components/component/chips
diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts
index cfce927bc3fe..2aa5a827a7f7 100644
--- a/src/material/chips/chip.ts
+++ b/src/material/chips/chip.ts
@@ -180,10 +180,10 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
   /**
    * Theme color of the chip. This API is supported in M2 themes only, it has no
-   * effect in M3 themes. For color customization in M3, see https://material.angular.io/components/chips/styling.
+   * effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/chips/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color?: string | null;
 
diff --git a/src/material/core/m2/_typography.scss b/src/material/core/m2/_typography.scss
index 9aace3396e1a..bddab7225311 100644
--- a/src/material/core/m2/_typography.scss
+++ b/src/material/core/m2/_typography.scss
@@ -178,7 +178,7 @@ $_mdc-levels: (
 /// @param {Map} $input Configuration for the "input" typographic level.
 /// @returns {Map} A typography config for the application.
 ///
-/// @deprecated Use `mat.m2-define-typography-config` instead. See https://v17.material.angular.io/guide/mdc-migration for information about migrating.
+/// @deprecated Use `mat.m2-define-typography-config` instead. See https://v17.material.angular.dev/guide/mdc-migration for information about migrating.
 /// @breaking-change 17.0.0
 @function define-legacy-typography-config(
   $font-family:   'Roboto, "Helvetica Neue", sans-serif',
diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss
index c10879a7bc19..e3ddff8a4d20 100644
--- a/src/material/core/theming/_theming.scss
+++ b/src/material/core/theming/_theming.scss
@@ -15,13 +15,13 @@ $_generate-default-density: true !default;
 
 // Warning that will be printed if duplicated styles are generated by a theme.
 $_duplicate-warning: 'Read more about how style duplication can be avoided in a dedicated ' +
-  'guide. https://v18.material.angular.io/guide/duplicate-theming-styles';
+  'guide. https://v18.material.angular.dev/guide/duplicate-theming-styles';
 
 // Warning that will be printed if the legacy theming API is used.
 $private-legacy-theme-warning: 'Angular Material themes should be created from a map containing ' +
   'the keys "color", "typography", and "density". The color value should be a map containing the ' +
   'palette values for "primary", "accent", and "warn". ' +
-  'See https://material.angular.io/guide/theming for more information.';
+  'See https://material.angular.dev/guide/theming for more information.';
 
 // Flag whether to disable theme definitions copying color values to the top-level theme config.
 // This copy is to preserve backwards compatibility.
diff --git a/src/material/datepicker/README.md b/src/material/datepicker/README.md
index 2ee9acdf6254..b972f67e5d28 100644
--- a/src/material/datepicker/README.md
+++ b/src/material/datepicker/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/datepicker
+Please see the official documentation at https://material.angular.dev/components/component/datepicker
diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts
index 18408d50158d..52b846ad984e 100644
--- a/src/material/datepicker/datepicker-base.ts
+++ b/src/material/datepicker/datepicker-base.ts
@@ -165,10 +165,10 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
 
   /**
    * Theme color of the internal calendar. This API is supported in M2 themes
-   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
+   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/datepicker/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
@@ -362,10 +362,10 @@ export interface MatDatepickerPanel<
   closedStream: EventEmitter<void>;
   /**
    * Color palette to use on the datepicker's calendar. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/datepicker/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color: ThemePalette;
   /** The input element the datepicker is associated with. */
@@ -426,10 +426,10 @@ export abstract class MatDatepickerBase<
 
   /**
    * Theme color of the datepicker's calendar. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/datepicker/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color(): ThemePalette {
diff --git a/src/material/dialog/README.md b/src/material/dialog/README.md
index b4753f6be5b7..f550eedab7c2 100644
--- a/src/material/dialog/README.md
+++ b/src/material/dialog/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/dialog
+Please see the official documentation at https://material.angular.dev/components/component/dialog
diff --git a/src/material/divider/README.md b/src/material/divider/README.md
index 0ccb4d491be6..b7de9b27a82b 100644
--- a/src/material/divider/README.md
+++ b/src/material/divider/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/divider
\ No newline at end of file
+Please see the official documentation at https://material.angular.dev/components/component/divider
diff --git a/src/material/form-field/README.md b/src/material/form-field/README.md
index 7a1234123cc2..6f04996ade63 100644
--- a/src/material/form-field/README.md
+++ b/src/material/form-field/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/form-field
+Please see the official documentation at https://material.angular.dev/components/component/form-field
diff --git a/src/material/form-field/form-field.md b/src/material/form-field/form-field.md
index fb5e1335d1dd..3a0aa7a00f74 100644
--- a/src/material/form-field/form-field.md
+++ b/src/material/form-field/form-field.md
@@ -8,10 +8,10 @@ In this document, "form field" refers to the wrapper component `<mat-form-field>
 
 The following Angular Material components are designed to work inside a `<mat-form-field>`:
 
-- [`<input matNativeControl>` &amp; `<textarea matNativeControl>`](https://material.angular.io/components/input/overview)
-- [`<select matNativeControl>`](https://material.angular.io/components/select/overview)
-- [`<mat-select>`](https://material.angular.io/components/select/overview)
-- [`<mat-chip-set>`](https://material.angular.io/components/chips/overview)
+- [`<input matNativeControl>` &amp; `<textarea matNativeControl>`](https://material.angular.dev/components/input/overview)
+- [`<select matNativeControl>`](https://material.angular.dev/components/select/overview)
+- [`<mat-select>`](https://material.angular.dev/components/select/overview)
+- [`<mat-chip-set>`](https://material.angular.dev/components/chips/overview)
 
 <!-- example(form-field-overview) -->
 
diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts
index 11149b975fa8..c3c81b054553 100644
--- a/src/material/form-field/form-field.ts
+++ b/src/material/form-field/form-field.ts
@@ -74,10 +74,10 @@ export interface MatFormFieldDefaultOptions {
   appearance?: MatFormFieldAppearance;
   /**
    * Default theme color of the form field. This API is supported in M2 themes only, it has no
-   * effect in M3 themes. For color customization in M3, see https://material.angular.io/components/form-field/styling.
+   * effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/form-field/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
   /** Whether the required marker should be hidden by default. */
@@ -238,10 +238,10 @@ export class MatFormField
 
   /**
    * Theme color of the form field. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/form-field/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/form-field/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette = 'primary';
 
diff --git a/src/material/grid-list/README.md b/src/material/grid-list/README.md
index 0a04c0bd9658..e97dcc80ae6b 100644
--- a/src/material/grid-list/README.md
+++ b/src/material/grid-list/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/grid-list
\ No newline at end of file
+Please see the official documentation at https://material.angular.dev/components/component/grid-list
diff --git a/src/material/icon/README.md b/src/material/icon/README.md
index a260ed85a317..7292fe11975b 100644
--- a/src/material/icon/README.md
+++ b/src/material/icon/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/icon
+Please see the official documentation at https://material.angular.dev/components/component/icon
diff --git a/src/material/icon/icon.ts b/src/material/icon/icon.ts
index 163e4a4fe293..48d540b60ae0 100644
--- a/src/material/icon/icon.ts
+++ b/src/material/icon/icon.ts
@@ -32,10 +32,10 @@ import {MatIconRegistry} from './icon-registry';
 export interface MatIconDefaultOptions {
   /**
    * Theme color of the icon. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/icon/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/icon/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
   /** Font set that the icon is a part of. */
@@ -163,10 +163,10 @@ export class MatIcon implements OnInit, AfterViewChecked, OnDestroy {
 
   /**
    * Theme color of the icon. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/icon/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/icon/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color() {
diff --git a/src/material/input/README.md b/src/material/input/README.md
index 451d9b3e05b9..dd31fc35021d 100644
--- a/src/material/input/README.md
+++ b/src/material/input/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/input
+Please see the official documentation at https://material.angular.dev/components/component/input
diff --git a/src/material/input/input.md b/src/material/input/input.md
index bde6aa86ea11..f49f312ec5f6 100644
--- a/src/material/input/input.md
+++ b/src/material/input/input.md
@@ -1,5 +1,5 @@
 `matInput` is a directive that allows native `<input>` and `<textarea>` elements to work with
-[`<mat-form-field>`](https://material.angular.io/components/form-field/overview).
+[`<mat-form-field>`](https://material.angular.dev/components/form-field/overview).
 
 <!-- example(input-overview) -->
 
@@ -35,7 +35,7 @@ be used with `matNativeControl`:
 There are a number of `<mat-form-field>` features that can be used with any `<input matNativeControl>` or
 `<textarea matNativeControl>`. These include error messages, hint text, prefix & suffix, and theming. For
 additional information about these features, see the
-[form field documentation](https://material.angular.io/components/form-field/overview).
+[form field documentation](https://material.angular.dev/components/form-field/overview).
 
 ### Placeholder
 
@@ -43,12 +43,12 @@ The placeholder is text shown when the `<mat-form-field>` label is floating but
 It is used to give the user an additional hint about what they should type in the input. The
 placeholder can be specified by setting the `placeholder` attribute on the `<input>` or `<textarea>`
 element. In some cases that `<mat-form-field>` may use the placeholder as the label (see the
-[form field label documentation](https://material.angular.io/components/form-field/overview#floating-label)).
+[form field label documentation](https://material.angular.dev/components/form-field/overview#floating-label)).
 
 ### Changing when error messages are shown
 
 The `<mat-form-field>` allows you to
-[associate error messages](https://material.angular.io/components/form-field/overview#error-messages)
+[associate error messages](https://material.angular.dev/components/form-field/overview#error-messages)
 with your `matNativeControl`. By default, these error messages are shown when the control is invalid and
 the user has interacted with (touched) the element or the parent form has been submitted. If
 you wish to override this behavior (e.g. to show the error as soon as the invalid control is dirty
@@ -75,13 +75,13 @@ globally cause input errors to show when the input is dirty and invalid.
 ### Auto-resizing `<textarea>` elements
 
 `<textarea>` elements can be made to automatically resize by using the
-[`cdkTextareaAutosize` directive](https://material.angular.io/cdk/text-field/overview#automatically-resizing-a-textarea)
+[`cdkTextareaAutosize` directive](https://material.angular.dev/cdk/text-field/overview#automatically-resizing-a-textarea)
 available in the CDK.
 
 ### Responding to changes in the autofill state of an `<input>`
 
 The CDK provides
-[utilities](https://material.angular.io/cdk/text-field/overview#monitoring-the-autofill-state-of-an-input)
+[utilities](https://material.angular.dev/cdk/text-field/overview#monitoring-the-autofill-state-of-an-input)
 for detecting when an input becomes autofilled and changing the appearance of the autofilled state.
 
 ### Accessibility
@@ -109,5 +109,5 @@ icon or text such as "Error:" to indicate the message is an error message.
 This error is thrown when you attempt to set an input's `type` property to a value that isn't
 supported by the `matInput` directive. If you need to use an unsupported input type with
 `<mat-form-field>` consider writing a
-[custom form field control](https://material.angular.io/guide/creating-a-custom-form-field-control)
+[custom form field control](https://material.angular.dev/guide/creating-a-custom-form-field-control)
 for it.
diff --git a/src/material/list/README.md b/src/material/list/README.md
index dae27c0261d4..0be54e55f670 100644
--- a/src/material/list/README.md
+++ b/src/material/list/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/list
+Please see the official documentation at https://material.angular.dev/components/component/list
diff --git a/src/material/list/list-option.ts b/src/material/list/list-option.ts
index 7c6b82c4d30a..420ae7677d4e 100644
--- a/src/material/list/list-option.ts
+++ b/src/material/list/list-option.ts
@@ -134,10 +134,10 @@ export class MatListOption extends MatListItemBase implements ListOption, OnInit
   /**
    * Theme color of the list option. This sets the color of the checkbox/radio.
    * This API is supported in M2 themes only, it has no effect in M3 themes. For color customization
-   * in M3, see https://material.angular.io/components/list/styling.
+   * in M3, see https://material.angular.dev/components/list/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color(): ThemePalette {
diff --git a/src/material/list/selection-list.ts b/src/material/list/selection-list.ts
index 3bbbec2dad04..ca819bd7e0f4 100644
--- a/src/material/list/selection-list.ts
+++ b/src/material/list/selection-list.ts
@@ -103,10 +103,10 @@ export class MatSelectionList
   /**
    * Theme color of the selection list. This sets the checkbox color for all
    * list options. This API is supported in M2 themes only, it has no effect in
-   * M3 themes. For color customization in M3, see https://material.angular.io/components/list/styling.
+   * M3 themes. For color customization in M3, see https://material.angular.dev/components/list/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette = 'accent';
 
diff --git a/src/material/menu/README.md b/src/material/menu/README.md
index b521869c023d..de661e68c8be 100644
--- a/src/material/menu/README.md
+++ b/src/material/menu/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/menu
+Please see the official documentation at https://material.angular.dev/components/component/menu
diff --git a/src/material/paginator/paginator.ts b/src/material/paginator/paginator.ts
index 2d429a7e2d7b..847d1c60a6c1 100644
--- a/src/material/paginator/paginator.ts
+++ b/src/material/paginator/paginator.ts
@@ -124,10 +124,10 @@ export class MatPaginator implements OnInit, OnDestroy {
 
   /**
    * Theme color of the underlying form controls. This API is supported in M2
-   * themes only,it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/paginator/styling.
+   * themes only,it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/paginator/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
diff --git a/src/material/progress-bar/README.md b/src/material/progress-bar/README.md
index 01fc8153bcf8..6b435b441672 100644
--- a/src/material/progress-bar/README.md
+++ b/src/material/progress-bar/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/progress-bar
+Please see the official documentation at https://material.angular.dev/components/component/progress-bar
diff --git a/src/material/progress-bar/progress-bar.ts b/src/material/progress-bar/progress-bar.ts
index f52514248836..5c94e128205c 100644
--- a/src/material/progress-bar/progress-bar.ts
+++ b/src/material/progress-bar/progress-bar.ts
@@ -36,10 +36,10 @@ export interface ProgressAnimationEnd {
 export interface MatProgressBarDefaultOptions {
   /**
    * Default theme color of the progress bar. This API is supported in M2 themes only,
-   * it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-bar/styling.
+   * it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/progress-bar/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
 
@@ -140,10 +140,10 @@ export class MatProgressBar implements AfterViewInit, OnDestroy {
   // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
   /**
    * Theme color of the progress bar. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-bar/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/progress-bar/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color() {
diff --git a/src/material/progress-spinner/README.md b/src/material/progress-spinner/README.md
index a2f90567df01..fc9c1d17480b 100644
--- a/src/material/progress-spinner/README.md
+++ b/src/material/progress-spinner/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/progress-spinner
+Please see the official documentation at https://material.angular.dev/components/component/progress-spinner
diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts
index ccd9bf730880..d24223ead811 100644
--- a/src/material/progress-spinner/progress-spinner.ts
+++ b/src/material/progress-spinner/progress-spinner.ts
@@ -27,10 +27,10 @@ export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
 export interface MatProgressSpinnerDefaultOptions {
   /**
    * Default theme color of the progress spinner. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-spinner/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/progress-spinner/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
   /** Diameter of the spinner. */
@@ -106,10 +106,10 @@ export class MatProgressSpinner {
   // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
   /**
    * Theme color of the progress spinner. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/progress-spinner/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/progress-spinner/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color() {
diff --git a/src/material/radio/README.md b/src/material/radio/README.md
index 37cb69dd60d5..2ca2f121f10b 100644
--- a/src/material/radio/README.md
+++ b/src/material/radio/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/radio
+Please see the official documentation at https://material.angular.dev/components/component/radio
diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts
index 18f71768b6a0..61e2df4c60fb 100644
--- a/src/material/radio/radio.ts
+++ b/src/material/radio/radio.ts
@@ -79,10 +79,10 @@ export const MAT_RADIO_GROUP = new InjectionToken<MatRadioGroup>('MatRadioGroup'
 export interface MatRadioDefaultOptions {
   /**
    * Theme color of the radio button. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/radio/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color: ThemePalette;
 
@@ -174,10 +174,10 @@ export class MatRadioGroup implements AfterContentInit, OnDestroy, ControlValueA
 
   /**
    * Theme color of the radio buttons in the group. This API is supported in M2
-   * themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.
+   * themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/radio/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
@@ -528,10 +528,10 @@ export class MatRadioButton implements OnInit, AfterViewInit, DoCheck, OnDestroy
 
   /**
    * Theme color of the radio button. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/radio/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/radio/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get color(): ThemePalette {
diff --git a/src/material/schematics/ng-add/schema.json b/src/material/schematics/ng-add/schema.json
index 3d4fd270d9a8..7017356a89ff 100644
--- a/src/material/schematics/ng-add/schema.json
+++ b/src/material/schematics/ng-add/schema.json
@@ -21,19 +21,19 @@
         "items": [
           {
             "value": "azure-blue",
-            "label": "Azure/Blue         [Preview: https://material.angular.io?theme=azure-blue]"
+            "label": "Azure/Blue         [Preview: https://material.angular.dev?theme=azure-blue]"
           },
           {
             "value": "rose-red",
-            "label": "Rose/Red           [Preview: https://material.angular.io?theme=rose-red]"
+            "label": "Rose/Red           [Preview: https://material.angular.dev?theme=rose-red]"
           },
           {
             "value": "magenta-violet",
-            "label": "Magenta/Violet     [Preview: https://material.angular.io?theme=magenta-violet]"
+            "label": "Magenta/Violet     [Preview: https://material.angular.dev?theme=magenta-violet]"
           },
           {
             "value": "cyan-orange",
-            "label": "Cyan/Orange        [Preview: https://material.angular.io?theme=cyan-orange]"
+            "label": "Cyan/Orange        [Preview: https://material.angular.dev?theme=cyan-orange]"
           },
           {"value": "custom", "label": "Custom"}
         ]
diff --git a/src/material/schematics/ng-add/theming/create-custom-theme.ts b/src/material/schematics/ng-add/theming/create-custom-theme.ts
index b75880360b06..d490edef7b90 100644
--- a/src/material/schematics/ng-add/theming/create-custom-theme.ts
+++ b/src/material/schematics/ng-add/theming/create-custom-theme.ts
@@ -10,7 +10,7 @@
 export function createCustomTheme(name: string = 'app') {
   return `
 // Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
+// For more information: https://material.angular.dev/guide/theming
 @use '@angular/material' as mat;
 
 html {
diff --git a/src/material/schematics/ng-generate/theme-color/README.md b/src/material/schematics/ng-generate/theme-color/README.md
index 85c1243bd684..e128f8457910 100644
--- a/src/material/schematics/ng-generate/theme-color/README.md
+++ b/src/material/schematics/ng-generate/theme-color/README.md
@@ -6,7 +6,7 @@ ng generate @angular/material:theme-color
 ## Background
 This schematic allows users to create new Material 3 theme palettes based
 on custom colors by using [Material Color Utilities](https://github.com/material-foundation/material-color-utilities).
-This is an alternative to using the available [predefined theme palettes](https://material.angular.io/guide/theming#prebuilt-color-palettes).
+This is an alternative to using the available [predefined theme palettes](https://material.angular.dev/guide/theming#prebuilt-color-palettes).
 
 The generated [color palettes](https://m3.material.io/styles/color/roles) are
 optimized to have enough contrast to be more accessible. See [Science of Color Design](https://material.io/blog/science-of-color-design)
@@ -47,7 +47,7 @@ true.
 The result of running the schematic is a new file with the generated custom colors.
 
 Angular recommendeds generating a Sass file since our theming system Sass APIs are supported and
-have benefits such as error handling and relate to the [theming documentation](https://material.angular.io/guide/theming).
+have benefits such as error handling and relate to the [theming documentation](https://material.angular.dev/guide/theming).
 If there are ever changes to the theming system or system variable names, your styles will continue
 to work and be supported. Color palettes get defined in the generated file that you can pass into
 the `theme()` mixin in your own theme file. See the [Sass themes section](#sass-themes) for more
@@ -129,7 +129,7 @@ html {
 #### Adaptive high contrast colors for adaptive themes
 The `theme()` mixin can create one theme that detects and adapts to a user if they have a
 light or dark theme by defining `color-scheme`. See the [color-scheme documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme)
-and the [theming guide](https://material.angular.io/guide/theming#supporting-light-and-dark-mode)
+and the [theming guide](https://material.angular.dev/guide/theming#supporting-light-and-dark-mode)
 for more information.
 
 Apply the `high-contrast-overrides(color-scheme)` mixin wrapped inside `@media (prefers-contrast: more)`
diff --git a/src/material/select/README.md b/src/material/select/README.md
index 092134ace1ca..beb4f4614234 100644
--- a/src/material/select/README.md
+++ b/src/material/select/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/select
+Please see the official documentation at https://material.angular.dev/components/component/select
diff --git a/src/material/select/select.md b/src/material/select/select.md
index 2a00d2849caf..619a82ed6cce 100644
--- a/src/material/select/select.md
+++ b/src/material/select/select.md
@@ -1,7 +1,7 @@
 `<mat-select>` is a form control for selecting a value from a set of options, similar to the native
 `<select>` element. You can read more about selects in the
 [Material Design spec](https://material.io/design/components/menus.html). It is designed to work
-inside of a [`<mat-form-field>`](https://material.angular.io/components/form-field/overview)
+inside of a [`<mat-form-field>`](https://material.angular.dev/components/form-field/overview)
 element.
 
 To add options to the select, add `<mat-option>` elements to the `<mat-select>`. Each `<mat-option>`
@@ -11,7 +11,7 @@ this option. The content of the `<mat-option>` is what will be shown to the user
 Angular Material also supports use of the native `<select>` element inside of
 `<mat-form-field>`. The native control has several performance, accessibility,
 and usability advantages. See [the documentation for
-form-field](https://material.angular.io/components/form-field) for more information.
+form-field](https://material.angular.dev/components/form-field) for more information.
 
 To use a native select inside `<mat-form-field>`, import `MatInputModule` and add the
 `matNativeControl` attribute to the `<select>` element.
@@ -38,7 +38,7 @@ function can be found in the
 There are a number of `<mat-form-field>` features that can be used with both `<select>` and `<mat-select>`. These
 include error messages, hint text, prefix & suffix, and theming. For additional information about
 these features, see the
-[form field documentation](https://material.angular.io/components/form-field/overview).
+[form field documentation](https://material.angular.dev/components/form-field/overview).
 
 <!-- example(select-hint-error) -->
 
@@ -48,7 +48,7 @@ The placeholder is text shown when the `<mat-form-field>` label is floating but
 is empty. It is used to give the user an additional hint about the value they should select. The
 placeholder can be specified by setting the `placeholder` attribute on the `<mat-select>` element.
 In some cases that `<mat-form-field>` may use the placeholder as the label (see the
-[form field label documentation](https://material.angular.io/components/form-field/overview#floating-label)).
+[form field label documentation](https://material.angular.dev/components/form-field/overview#floating-label)).
 
 ### Disabling the select or individual options
 
@@ -121,7 +121,7 @@ which can be used to apply additional CSS classes to the dropdown panel.
 ### Changing when error messages are shown
 
 The `<mat-form-field>` allows you to
-[associate error messages](https://material.angular.io/components/form-field/overview#error-messages)
+[associate error messages](https://material.angular.dev/components/form-field/overview#error-messages)
 with your `<select>` or `<mat-select>`. By default, these error messages are shown when the control is invalid and
 either the user has interacted with (touched) the element or the parent form has been submitted. If
 you wish to override this behavior (e.g. to show the error as soon as the invalid control is dirty
diff --git a/src/material/sidenav/README.md b/src/material/sidenav/README.md
index d9e0e12aab51..4fb96a0f5903 100644
--- a/src/material/sidenav/README.md
+++ b/src/material/sidenav/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/sidenav
+Please see the official documentation at https://material.angular.dev/components/component/sidenav
diff --git a/src/material/slide-toggle/README.md b/src/material/slide-toggle/README.md
index 8519d239d5b8..31214c49d1ad 100644
--- a/src/material/slide-toggle/README.md
+++ b/src/material/slide-toggle/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/slide-toggle
+Please see the official documentation at https://material.angular.dev/components/component/slide-toggle
diff --git a/src/material/slide-toggle/slide-toggle-config.ts b/src/material/slide-toggle/slide-toggle-config.ts
index f8b21b1bd1db..e78afce93700 100644
--- a/src/material/slide-toggle/slide-toggle-config.ts
+++ b/src/material/slide-toggle/slide-toggle-config.ts
@@ -15,10 +15,10 @@ export interface MatSlideToggleDefaultOptions {
 
   /**
    * Default theme color of the slide toggle. This API is supported in M2 themes only,
-   * it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/slide-toggle/styling.
+   * it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/slide-toggle/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   color?: ThemePalette;
 
diff --git a/src/material/slide-toggle/slide-toggle.ts b/src/material/slide-toggle/slide-toggle.ts
index c606a5025ea0..2b0df39012c4 100644
--- a/src/material/slide-toggle/slide-toggle.ts
+++ b/src/material/slide-toggle/slide-toggle.ts
@@ -156,10 +156,10 @@ export class MatSlideToggle
   // the lack of type checking previously and assigning random strings.
   /**
    * Theme color of the slide toggle. This API is supported in M2 themes only,
-   * it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/slide-toggle/styling.
+   * it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/slide-toggle/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: string | undefined;
 
diff --git a/src/material/slider/README.md b/src/material/slider/README.md
index bcfdb2a23c20..9bf0fca3c9c5 100644
--- a/src/material/slider/README.md
+++ b/src/material/slider/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/slider
+Please see the official documentation at https://material.angular.dev/components/component/slider
diff --git a/src/material/slider/slider-interface.ts b/src/material/slider/slider-interface.ts
index f01668110868..b18da3f8fbb6 100644
--- a/src/material/slider/slider-interface.ts
+++ b/src/material/slider/slider-interface.ts
@@ -67,7 +67,7 @@ export interface MatSliderDragEvent {
 
 /**
  * A simple change event emitted by the MatSlider component.
- * @deprecated Use event bindings directly on the MatSliderThumbs for `change` and `input` events. See https://v17.material.angular.io/guide/mdc-migration for information about migrating.
+ * @deprecated Use event bindings directly on the MatSliderThumbs for `change` and `input` events. See https://v17.material.angular.dev/guide/mdc-migration for information about migrating.
  * @breaking-change 17.0.0
  */
 export class MatSliderChange {
diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts
index 7ce70cdc12aa..823870215ca1 100644
--- a/src/material/slider/slider.ts
+++ b/src/material/slider/slider.ts
@@ -149,10 +149,10 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
 
   /**
    * Theme color of the slider. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/slider/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/slider/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   color: ThemePalette;
diff --git a/src/material/snack-bar/README.md b/src/material/snack-bar/README.md
index dadbabcf5cd8..67bb1b880d06 100644
--- a/src/material/snack-bar/README.md
+++ b/src/material/snack-bar/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/snack-bar
+Please see the official documentation at https://material.angular.dev/components/component/snack-bar
diff --git a/src/material/stepper/step-header.ts b/src/material/stepper/step-header.ts
index c6f1815e0b5e..db4bac260578 100644
--- a/src/material/stepper/step-header.ts
+++ b/src/material/stepper/step-header.ts
@@ -76,10 +76,10 @@ export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDes
 
   /**
    * Theme color of the step header. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/stepper/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/stepper/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
diff --git a/src/material/stepper/stepper.ts b/src/material/stepper/stepper.ts
index fe5834bde0a0..17b7781e1907 100644
--- a/src/material/stepper/stepper.ts
+++ b/src/material/stepper/stepper.ts
@@ -68,10 +68,10 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI
 
   /**
    * Theme color for the particular step. This API is supported in M2 themes
-   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/stepper/styling.
+   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/stepper/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
@@ -168,10 +168,10 @@ export class MatStepper extends CdkStepper implements AfterViewInit, AfterConten
 
   /**
    * Theme color for all of the steps in stepper. This API is supported in M2
-   * themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/stepper/styling.
+   * themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/stepper/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette;
 
diff --git a/src/material/table/README.md b/src/material/table/README.md
index 57531f0cbf1e..e5703902b6e3 100644
--- a/src/material/table/README.md
+++ b/src/material/table/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/table
+Please see the official documentation at https://material.angular.dev/components/component/table
diff --git a/src/material/table/table.md b/src/material/table/table.md
index 78f0ee5a67fa..c578e5625ea0 100644
--- a/src/material/table/table.md
+++ b/src/material/table/table.md
@@ -5,7 +5,7 @@ This table builds on the foundation of the CDK data-table and uses a similar int
 data input and template, except that its element and attribute selectors will be prefixed
 with `mat-` instead of `cdk-`. For more information on the interface and a detailed look at how
 the table is implemented, see the
-[guide covering the CDK data-table](https://material.angular.io/guide/cdk-table).
+[guide covering the CDK data-table](https://material.angular.dev/guide/cdk-table).
 
 ### Getting Started
 
@@ -167,7 +167,7 @@ Otherwise if you are implementing the logic to paginate your data, you will want
 paginator's `(page)` output and pass the right slice of data to your table.
 
 For more information on using and configuring the `<mat-paginator>`, check out the
-[mat-paginator docs](https://material.angular.io/components/paginator/overview).
+[mat-paginator docs](https://material.angular.dev/components/paginator/overview).
 
 The `MatPaginator` is one provided solution to paginating your table's data, but it is not the only
 option. In fact, the table can work with any custom pagination UI or strategy since the `MatTable`
@@ -178,7 +178,7 @@ and its interface is not tied to any one specific implementation.
 #### Sorting
 
 To add sorting behavior to the table, add the `matSort` directive to the table and add
-`mat-sort-header` to each column header cell that should trigger sorting. Note that you have to import `MatSortModule` in order to initialize the `matSort` directive (see [API docs](https://material.angular.io/components/sort/api)).
+`mat-sort-header` to each column header cell that should trigger sorting. Note that you have to import `MatSortModule` in order to initialize the `matSort` directive (see [API docs](https://material.angular.dev/components/sort/api)).
 
 ```html
 <!-- Name Column -->
@@ -210,7 +210,7 @@ table, since it will not automatically check the array for changes.
 <!-- example(table-sorting) -->
 
 For more information on using and configuring the sorting behavior, check out the
-[matSort docs](https://material.angular.io/components/sort/overview).
+[matSort docs](https://material.angular.dev/components/sort/overview).
 
 The `MatSort` is one provided solution to sorting your table's data, but it is not the only option.
 In fact, the table can work with any custom sorting UI or strategy since the `MatTable` and
diff --git a/src/material/tabs/README.md b/src/material/tabs/README.md
index 5f068875e5aa..d7e5441f45c2 100644
--- a/src/material/tabs/README.md
+++ b/src/material/tabs/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/tabs
+Please see the official documentation at https://material.angular.dev/components/component/tabs
diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
index 1d561907b607..8077f02e1396 100644
--- a/src/material/tabs/tab-group.ts
+++ b/src/material/tabs/tab-group.ts
@@ -124,10 +124,10 @@ export class MatTabGroup
 
   /**
    * Theme color of the tab group. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/tabs/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   color: ThemePalette;
@@ -217,10 +217,10 @@ export class MatTabGroup
 
   /**
    * Theme color of the background of the tab group. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/tabs/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    *
    * @deprecated The background color should be customized through Sass theming APIs.
    * @breaking-change 20.0.0 Remove this input
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
index 88597047df37..2ce296e3a663 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -102,10 +102,10 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
 
   /**
    * Theme color of the background of the tab nav. This API is supported in M2 themes only, it
-   * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/tabs/styling.
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input()
   get backgroundColor(): ThemePalette {
@@ -131,10 +131,10 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
 
   /**
    * Theme color of the nav bar. This API is supported in M2 themes only, it has
-   * no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/tabs/styling.
+   * no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color: ThemePalette = 'primary';
 
diff --git a/src/material/toolbar/README.md b/src/material/toolbar/README.md
index 840ec88d90b5..72dd4eca7442 100644
--- a/src/material/toolbar/README.md
+++ b/src/material/toolbar/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/toolbar
\ No newline at end of file
+Please see the official documentation at https://material.angular.dev/components/component/toolbar
diff --git a/src/material/toolbar/toolbar.ts b/src/material/toolbar/toolbar.ts
index 561217990174..d0fc68fd8fac 100644
--- a/src/material/toolbar/toolbar.ts
+++ b/src/material/toolbar/toolbar.ts
@@ -51,10 +51,10 @@ export class MatToolbar implements AfterViewInit {
   // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
   /**
    * Theme color of the toolbar. This API is supported in M2 themes only, it has
-   * no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/toolbar/styling.
+   * no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/toolbar/styling.
    *
    * For information on applying color variants in M3, see
-   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
    */
   @Input() color?: string | null;
 
diff --git a/src/material/tooltip/README.md b/src/material/tooltip/README.md
index c82fc6795bae..a290691811e9 100644
--- a/src/material/tooltip/README.md
+++ b/src/material/tooltip/README.md
@@ -1 +1 @@
-Please see the official documentation at https://material.angular.io/components/component/tooltip
+Please see the official documentation at https://material.angular.dev/components/component/tooltip
diff --git a/tools/dgeni/common/compute-api-url.ts b/tools/dgeni/common/compute-api-url.ts
index 9ac5100f7190..886fd217d101 100644
--- a/tools/dgeni/common/compute-api-url.ts
+++ b/tools/dgeni/common/compute-api-url.ts
@@ -3,12 +3,12 @@ import {ModuleInfo} from '../processors/entry-point-grouper';
 
 /**
  * Computes an URL that refers to the given API document in the docs. Note that this logic
- * needs to be kept in sync with the routes from the material.angular.io CLI project.
+ * needs to be kept in sync with the routes from the material.angular.dev CLI project.
  */
 export function computeApiDocumentUrl(apiDoc: Document, moduleInfo: ModuleInfo): string {
   // Base URL for the given package. This is currently either:
-  //   1) material.angular.io/cdk
-  //   2) material.angular.io/components
+  //   1) material.angular.dev/cdk
+  //   2) material.angular.dev/components
   const baseUrl = moduleInfo.packageName === 'cdk' ? 'cdk' : 'components';
   return `${baseUrl}/${moduleInfo.entryPointName}/api#${apiDoc.name}`;
 }
diff --git a/tools/region-parser/README.md b/tools/region-parser/README.md
index 39eacc60244e..e8c68b3401aa 100644
--- a/tools/region-parser/README.md
+++ b/tools/region-parser/README.md
@@ -1,3 +1,3 @@
 The implementation of `region-parser` is copied from the `angular/angular` repo. 
 It has been adapted from JavaScript to Typescript along with a few minor changes.
-This is part of an ongoing effort to share more components between [angular.io] and [material.angular.io].
+This is part of an ongoing effort to share more components between [angular.io] and [material.angular.dev].