diff --git a/guides/duplicate-theming-styles.md b/guides/duplicate-theming-styles.md
index 51264092442d..c85973453dd8 100644
--- a/guides/duplicate-theming-styles.md
+++ b/guides/duplicate-theming-styles.md
@@ -9,7 +9,7 @@ Below are examples of patterns that generate duplicative theme styles:
 **Example #1**
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $light-theme: mat.define-light-theme((color: ...));
 $dark-theme: mat.define-dark-theme((color: ...));
@@ -31,7 +31,7 @@ selector. Replace the `all-component-themes` mixin and include the dark theme us
 `all-component-colors` mixin. For example:
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 ...
 @include mat.all-component-themes($light-theme);
@@ -49,7 +49,7 @@ Typography can also be configured via Sass mixin; see `all-component-typographie
 Theme styles could also be duplicated if individual theme mixins are used. For example:
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @include mat.all-component-themes($my-theme);
 
@@ -63,7 +63,7 @@ To avoid this duplication of styles, use the dedicated mixin for the color syste
 extract the configuration for the color system from the theme.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .my-custom-dark-button {
   // This will only generate the color styles for `mat-button`.
@@ -77,7 +77,7 @@ If your application intentionally duplicates styles, a global Sass variable can
 set to disable duplication warnings from Angular Material. For example:
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 mat.$theme-ignore-duplication-warnings: true;
 
diff --git a/guides/elevation.md b/guides/elevation.md
index 5cea5b933f52..77a26ed3104d 100644
--- a/guides/elevation.md
+++ b/guides/elevation.md
@@ -31,7 +31,7 @@ Sass mixin. This mixin accepts a `$zValue` and an optional `$color`. The `$zValu
 box-shadow. You can use the `$color` parameter to further customize the shadow appearance.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .my-class-with-default-shadow {
   // Adds a shadow for elevation level 2 with default color and full opacity:
@@ -57,7 +57,7 @@ have a CSS class matching the pattern `mat-elevation-z#`, as described in
 You can use the `elevation-transition` mixin to add a transition when elevation changes.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .my-class {
   @include mat.elevation-transition();
diff --git a/guides/theming-your-components.md b/guides/theming-your-components.md
index 33303d4a43db..fe1712bb5c08 100644
--- a/guides/theming-your-components.md
+++ b/guides/theming-your-components.md
@@ -17,7 +17,7 @@ indicating whether dark mode is set.
 
 ```scss
 @use 'sass:map';
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $color-config:    mat.get-color-config($theme);
 $primary-palette: map.get($color-config, 'primary');
@@ -39,7 +39,7 @@ structure and for APIs for reading values from this config.
 [typography-config]: https://material.angular.io/guide/typography#typography-config
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $typography-config: mat.get-typography-config($theme);
 $my-font-family: mat.font-family($typography-config);
@@ -123,7 +123,7 @@ theme passed into the mixins.
 // _carousel-theme.scss
 
 @use 'sass:map';
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin color($theme) {
   // Get the color config from the theme.
@@ -158,7 +158,7 @@ have a config specified.
 // _carousel-theme.scss
 
 @use 'sass:map';
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin color($theme) {
   // Get the color config from the theme.
@@ -201,7 +201,7 @@ Now that you've defined the carousel component's theme mixin, you can include th
 the other theme mixins in your application.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @use './path/to/carousel-theme' as carousel;
 
 @include mat.core();
diff --git a/guides/theming.md b/guides/theming.md
index 1e482861160a..ade9efc06769 100644
--- a/guides/theming.md
+++ b/guides/theming.md
@@ -77,7 +77,7 @@ require these hues, but you can use these hues when defining a theme as describe
 [Defining a theme](#defining-a-theme) below.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $my-palette: mat.$indigo-palette;
 ```
@@ -109,7 +109,7 @@ once for your application, even if you define multiple themes. Including the `co
 times will result in duplicate CSS in your application.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @include mat.core();
 ```
@@ -127,7 +127,7 @@ Components use these hues to choose the most appropriate color for different par
 themselves.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $my-primary: mat.define-palette(mat.$indigo-palette, 500);
 $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
@@ -141,7 +141,7 @@ the result from `define-palette`. The choice of a light versus a dark theme dete
 background and foreground colors used throughout the components.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $my-primary: mat.define-palette(mat.$indigo-palette, 500);
 $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
@@ -174,7 +174,7 @@ Apply the styles for each of the components used in your application by includin
 theme Sass mixins.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @include mat.core();
 
@@ -206,7 +206,7 @@ component mixins, except they emit styles for `core-theme` and _all_ 35+ compone
 Material. Unless your application uses every single component, this will produce unnecessary CSS.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @include mat.core();
 
@@ -270,7 +270,7 @@ CSS rule declaration. See the [documentation for Sass mixins][sass-mixins] for f
 [sass-mixins]: https://sass-lang.com/documentation/at-rules/mixin
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @include mat.core();
 
@@ -323,7 +323,7 @@ The example below shows how to customize the color of all buttons inside element
 `.my-special-section` CSS class.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .my-special-section {
  $special-primary: mat.define-palette(mat.$orange-palette);
@@ -343,7 +343,7 @@ number identifier. You can also access the contrast color for a particular hue b
 hue's number idenfier with `-contrast`.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $my-palette: mat.define-palette(mat.$indigo-palette);
 
@@ -357,7 +357,7 @@ You can also reference colors using the `"default"`, `"lighter"`, `"darker"`, an
 passed to `define-palette`.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $my-palette: mat.define-palette(mat.$indigo-palette);
 
@@ -389,7 +389,7 @@ The following example includes strong focus indicator styles in an application a
 the custom theme API.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @include mat.core();
 @include mat.strong-focus-indicators();
@@ -421,7 +421,7 @@ The following example includes strong focus indicator styles with custom setting
 of the custom theme API.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @include mat.core();
 @include mat.strong-focus-indicators((
diff --git a/guides/typography.md b/guides/typography.md
index d0563410dd05..51dacd2b1677 100644
--- a/guides/typography.md
+++ b/guides/typography.md
@@ -66,7 +66,7 @@ accepts, in order, CSS values for `font-size`, `line-height`, `font-weight`, `fo
 `letter-spacing`. You can also specify the parameters by name, as demonstrated in the example below.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $my-custom-level: mat.define-typography-level(
   $font-family: Roboto,
@@ -86,7 +86,7 @@ a typography config with the `define-typography-config` Sass function. Every par
 baseline if unspecified.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $my-custom-typography-config: mat.define-typography-config(
   $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
@@ -102,7 +102,7 @@ To customize component typography for your entire application, you can pass your
 config to the `core` mixin described in the [theming guide][theming-system].
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $my-custom-typography: mat.define-typography-config(
   $headline:  mat.define-typography-level(3rem, 1, 700),
@@ -128,7 +128,7 @@ the `".kids-theme"` CSS class is present. You can [see the theming guide for mor
 defining multiple themes](https://material.angular.io/guide/theming#defining-multiple-themes).
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @include mat.core();
 
@@ -169,7 +169,7 @@ component, based on a provided typography config. The following example demonstr
 typography styles only for the button component.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $kids-typography: mat.define-typography-config(
   // Specify "Comic Sans" as the default font family for all levels.
@@ -249,7 +249,7 @@ Additionally, you can use the `typography-level` Sass mixin to directly emit the
 given typography level.
 
 ```scss
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 // Use the default configuration.
 $my-typography: mat.define-typography-config();
diff --git a/src/cdk/a11y/a11y.md b/src/cdk/a11y/a11y.md
index d6cff7ee6d90..6bc1c2f4f107 100644
--- a/src/cdk/a11y/a11y.md
+++ b/src/cdk/a11y/a11y.md
@@ -179,7 +179,7 @@ the host element with `checkChildren` set to `true`. Each of these directives ha
 ### Styling utilities
 
 The `cdk/a11y` package comes with Sass mixins that produce styles useful for building
-accessible experiences. 
+accessible experiences.
 
 #### Hiding elements in an accessible way
 
@@ -192,7 +192,7 @@ If you're using Angular Material, this class is included automatically by Angula
 system. Otherwise, you can include this mixin in a global stylesheet.
 
 ```scss
-@use '~@angular/cdk';
+@use '@angular/cdk';
 
 @include cdk.a11y-visually-hidden();
 ```
@@ -213,7 +213,7 @@ The mixin works by targeting a CSS class which is added to the `body` by the CDK
 mode is detected at runtime, via the `HighContrastModeDetector` service.
 
 ```scss
-@use '~@angular/cdk';
+@use '@angular/cdk';
 
 button {
   @include cdk.high-contrast() {
diff --git a/src/cdk/overlay/overlay.md b/src/cdk/overlay/overlay.md
index fb46abc343f0..7c1d468d89aa 100644
--- a/src/cdk/overlay/overlay.md
+++ b/src/cdk/overlay/overlay.md
@@ -7,7 +7,7 @@ using the CDK on its own, you'll have to include the styles yourself. You can do
 the prebuilt styles in your global stylesheet:
 
 ```scss
-@import '~@angular/cdk/overlay-prebuilt.css';
+@import '@angular/cdk/overlay-prebuilt.css';
 ```
 
 ### Creating overlays
diff --git a/src/cdk/text-field/text-field.md b/src/cdk/text-field/text-field.md
index 1424e8a6015a..c798a20c3354 100644
--- a/src/cdk/text-field/text-field.md
+++ b/src/cdk/text-field/text-field.md
@@ -35,7 +35,7 @@ you are using Angular Material, this CSS is included as part of the `mat-core` m
 using Angular Material, you should include this CSS with the `text-field-autofill` mixin.
 
 ```scss
-@use '~@angular/cdk';
+@use '@angular/cdk';
 
 @include cdk.text-field-autofill();
 ```
@@ -48,7 +48,7 @@ which can be used to set these properties. It takes a `background` value as the
 an optional `color` value as the second parameter.
 
 ```scss
-@use '~@angular/cdk';
+@use '@angular/cdk';
 
 // Set custom autofill inputs to have no background and red text.
 input.custom-autofill {
diff --git a/src/material-experimental/README.md b/src/material-experimental/README.md
index 683a33d91035..3f08dd3ffbf2 100644
--- a/src/material-experimental/README.md
+++ b/src/material-experimental/README.md
@@ -52,8 +52,8 @@ mixins except that they are suffixed with `-mdc`. Some experimental components m
 be included in the pre-built CSS mixin and will need to be explicitly included.
 
 ```scss
-  @use '~@angular/material' as mat;
-  @use '~@angular/material-experimental' as mat-experimental;
+  @use '@angular/material' as mat;
+  @use '@angular/material-experimental' as mat-experimental;
 
   $my-primary: mat.define-palette(mat.$indigo-palette);
   $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-autocomplete/README.md b/src/material-experimental/mdc-autocomplete/README.md
index 0805e16848d9..632899785968 100644
--- a/src/material-experimental/mdc-autocomplete/README.md
+++ b/src/material-experimental/mdc-autocomplete/README.md
@@ -57,8 +57,8 @@ component by following these steps:
    the experimental `<mat-autocomplete>`):
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $my-primary: mat.define-palette(mat.$indigo-palette);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-button/README.md b/src/material-experimental/mdc-button/README.md
index 38a577fbb84a..ca396439aafd 100644
--- a/src/material-experimental/mdc-button/README.md
+++ b/src/material-experimental/mdc-button/README.md
@@ -60,8 +60,8 @@ the button variants: standard buttons, icon buttons, and floating action buttons
 button variants you are using:
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $candy-app-primary: mat.define-palette(mat.$indigo-palette);
    $candy-app-accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-card/README.md b/src/material-experimental/mdc-card/README.md
index 68e577b8e396..9caced98c67b 100644
--- a/src/material-experimental/mdc-card/README.md
+++ b/src/material-experimental/mdc-card/README.md
@@ -58,8 +58,8 @@ component by following these steps:
 5. Add the theme and typography mixins to your Sass:
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $candy-app-primary: mat.define-palette(mat.$indigo-palette);
    $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-checkbox/README.md b/src/material-experimental/mdc-checkbox/README.md
index 605d632e34c6..6522d755aa8c 100644
--- a/src/material-experimental/mdc-checkbox/README.md
+++ b/src/material-experimental/mdc-checkbox/README.md
@@ -53,8 +53,8 @@ component by following these steps:
    the experimental `<mat-checkbox>`):
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $my-primary: mat.define-palette(mat.$indigo-palette);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-chips/README.md b/src/material-experimental/mdc-chips/README.md
index 94a11e5d0a3b..21b8c69d8422 100644
--- a/src/material-experimental/mdc-chips/README.md
+++ b/src/material-experimental/mdc-chips/README.md
@@ -50,8 +50,8 @@ Assuming your application is already up and running using Angular Material, you
 5. Add the theme mixins to your Sass:
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $candy-app-primary: mat.define-palette(mat.$indigo-palette);
    $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-menu/README.md b/src/material-experimental/mdc-menu/README.md
index b91e3ecd8f5d..599c7ec99d3b 100644
--- a/src/material-experimental/mdc-menu/README.md
+++ b/src/material-experimental/mdc-menu/README.md
@@ -57,8 +57,8 @@ component by following these steps:
    the experimental `<mat-menu>`):
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $my-primary: mat.define-palette(mat.$indigo-palette);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-paginator/README.md b/src/material-experimental/mdc-paginator/README.md
index 83f3b76baa1c..d41773f3ba42 100644
--- a/src/material-experimental/mdc-paginator/README.md
+++ b/src/material-experimental/mdc-paginator/README.md
@@ -53,8 +53,8 @@ component by following these steps:
    the experimental `<mat-paginator>`):
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $my-primary: mat.define-palette(mat.$indigo-palette);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-progress-bar/README.md b/src/material-experimental/mdc-progress-bar/README.md
index 7d3172d908f9..2fa41969f958 100644
--- a/src/material-experimental/mdc-progress-bar/README.md
+++ b/src/material-experimental/mdc-progress-bar/README.md
@@ -54,8 +54,8 @@ component by following these steps:
    the experimental `<mat-progress-bar>`):
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $my-primary: mat.define-palette(mat.$indigo-palette);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-progress-spinner/README.md b/src/material-experimental/mdc-progress-spinner/README.md
index 4c10851ad666..62e7372aebe6 100644
--- a/src/material-experimental/mdc-progress-spinner/README.md
+++ b/src/material-experimental/mdc-progress-spinner/README.md
@@ -54,8 +54,8 @@ component by following these steps:
    the experimental `<mat-progress-spinner>`):
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $my-primary: mat.define-palette(mat.$indigo-palette);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-radio/README.md b/src/material-experimental/mdc-radio/README.md
index 484bba69ef7c..aba33b8850b1 100644
--- a/src/material-experimental/mdc-radio/README.md
+++ b/src/material-experimental/mdc-radio/README.md
@@ -51,8 +51,8 @@ Assuming your application is already up and running using Angular Material, you
 5. Add the theme mixins to your Sass:
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $candy-app-primary: mat.define-palette(mat.$indigo-palette);
    $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-select/README.md b/src/material-experimental/mdc-select/README.md
index 6ff1741bf27f..5516a437221c 100644
--- a/src/material-experimental/mdc-select/README.md
+++ b/src/material-experimental/mdc-select/README.md
@@ -61,8 +61,8 @@ component by following these steps:
    the experimental `<mat-select>`):
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $my-primary: mat.define-palette(mat.$indigo-palette);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-slide-toggle/README.md b/src/material-experimental/mdc-slide-toggle/README.md
index 2a3b6bd28718..5eff83ec8a1c 100644
--- a/src/material-experimental/mdc-slide-toggle/README.md
+++ b/src/material-experimental/mdc-slide-toggle/README.md
@@ -53,8 +53,8 @@ component by following these steps:
    the experimental `<mat-slide-toggle>`):
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $my-primary: mat.define-palette(mat.$indigo-palette);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-slider/README.md b/src/material-experimental/mdc-slider/README.md
index d47687a2eaef..b0697b2fab57 100644
--- a/src/material-experimental/mdc-slider/README.md
+++ b/src/material-experimental/mdc-slider/README.md
@@ -48,8 +48,8 @@ Assuming your application is already up and running using Angular Material, you
 5. Add the theme mixins to your Sass:
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $candy-app-primary: mat.define-palette(mat.$indigo-palette);
    $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-snack-bar/README.md b/src/material-experimental/mdc-snack-bar/README.md
index 341a9abb137e..c18ce386cf1a 100644
--- a/src/material-experimental/mdc-snack-bar/README.md
+++ b/src/material-experimental/mdc-snack-bar/README.md
@@ -54,8 +54,8 @@ Assuming your application is already up and running using Angular Material, you
 5. Add the theme mixins to your Sass:
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $candy-app-primary: mat.define-palette(mat.$indigo-palette);
    $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-table/README.md b/src/material-experimental/mdc-table/README.md
index 96fbfaa2b5e8..84e4aa42f7e9 100644
--- a/src/material-experimental/mdc-table/README.md
+++ b/src/material-experimental/mdc-table/README.md
@@ -63,8 +63,8 @@ Assuming your application is already up and running using Angular Material, you
 5. Add the theme mixins to your Sass:
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $candy-app-primary: mat.define-palette(mat.$indigo-palette);
    $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-tabs/README.md b/src/material-experimental/mdc-tabs/README.md
index 1f4a159c412b..b08939b7bebb 100644
--- a/src/material-experimental/mdc-tabs/README.md
+++ b/src/material-experimental/mdc-tabs/README.md
@@ -57,8 +57,8 @@ component by following these steps:
    the experimental tabs):
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $my-primary: mat.define-palette(mat.$indigo-palette);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material-experimental/mdc-tooltip/README.md b/src/material-experimental/mdc-tooltip/README.md
index ad572017e242..d943f438fcea 100644
--- a/src/material-experimental/mdc-tooltip/README.md
+++ b/src/material-experimental/mdc-tooltip/README.md
@@ -53,8 +53,8 @@ component by following these steps:
    the experimental `matTooltip`):
 
    ```scss
-   @use '~@angular/material' as mat;
-   @use '~@angular/material-experimental' as mat-experimental;
+   @use '@angular/material' as mat;
+   @use '@angular/material-experimental' as mat-experimental;
 
    $my-primary: mat.define-palette(mat.$indigo-palette);
    $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts
index c0bcf597e96b..e9b60d4f005f 100644
--- a/src/material/schematics/ng-add/index.spec.ts
+++ b/src/material/schematics/ng-add/index.spec.ts
@@ -121,7 +121,7 @@ describe('ng-add schematic', () => {
     const buffer = tree.read(expectedStylesPath);
     const themeContent = buffer!.toString();
 
-    expect(themeContent).toContain(`@use '~@angular/material' as mat;`);
+    expect(themeContent).toContain(`@use '@angular/material' as mat;`);
     expect(themeContent).toContain(`$app-primary: mat.define-palette(`);
   });
 
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 948753c296f1..d122b0f1dcc1 100644
--- a/src/material/schematics/ng-add/theming/create-custom-theme.ts
+++ b/src/material/schematics/ng-add/theming/create-custom-theme.ts
@@ -11,7 +11,7 @@ export function createCustomTheme(name: string = 'app') {
 return `
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
diff --git a/src/material/schematics/ng-update/migrations/theming-api-v12/migration.ts b/src/material/schematics/ng-update/migrations/theming-api-v12/migration.ts
index 999fc28a9776..8f345ec2bb21 100644
--- a/src/material/schematics/ng-update/migrations/theming-api-v12/migration.ts
+++ b/src/material/schematics/ng-update/migrations/theming-api-v12/migration.ts
@@ -44,13 +44,13 @@ const commentPlaceholderEnd = '>>__';
  * APIs, because it allows us to run it inside g3 and to avoid introducing new dependencies.
  * @param fileContent Content of the file.
  * @param oldMaterialPrefix Prefix with which the old Material imports should start.
- *   Has to end with a slash. E.g. if `@import '~@angular/material/theming'` should be
- *   matched, the prefix would be `~@angular/material/`.
+ *   Has to end with a slash. E.g. if `@import '@angular/material/theming'` should be
+ *   matched, the prefix would be `@angular/material/`.
  * @param oldCdkPrefix Prefix with which the old CDK imports should start.
- *   Has to end with a slash. E.g. if `@import '~@angular/cdk/overlay'` should be
- *   matched, the prefix would be `~@angular/cdk/`.
- * @param newMaterialImportPath New import to the Material theming API (e.g. `~@angular/material`).
- * @param newCdkImportPath New import to the CDK Sass APIs (e.g. `~@angular/cdk`).
+ *   Has to end with a slash. E.g. if `@import '@angular/cdk/overlay'` should be
+ *   matched, the prefix would be `@angular/cdk/`.
+ * @param newMaterialImportPath New import to the Material theming API (e.g. `@angular/material`).
+ * @param newCdkImportPath New import to the CDK Sass APIs (e.g. `@angular/cdk`).
  * @param excludedImports Pattern that can be used to exclude imports from being processed.
  */
 export function migrateFileContent(fileContent: string,
@@ -104,7 +104,7 @@ function detectImports(content: string, prefix: string,
   // namespaces as equivalent.
   const namespaces: string[] = [];
   const imports: string[] = [];
-  const pattern = new RegExp(`@(import|use) +['"]${escapeRegExp(prefix)}.*['"].*;?\n`, 'g');
+  const pattern = new RegExp(`@(import|use) +['"]~?${escapeRegExp(prefix)}.*['"].*;?\n`, 'g');
   let match: RegExpExecArray | null = null;
 
   while (match = pattern.exec(content)) {
diff --git a/src/material/schematics/ng-update/migrations/theming-api-v12/theming-api-migration.ts b/src/material/schematics/ng-update/migrations/theming-api-v12/theming-api-migration.ts
index 8141226e47da..f8319414cbc7 100644
--- a/src/material/schematics/ng-update/migrations/theming-api-v12/theming-api-migration.ts
+++ b/src/material/schematics/ng-update/migrations/theming-api-v12/theming-api-migration.ts
@@ -22,7 +22,7 @@ export class ThemingApiMigration extends DevkitMigration<null> {
     if (extname(stylesheet.filePath) === '.scss') {
       const content = stylesheet.content;
       const migratedContent = content ? migrateFileContent(content,
-        '~@angular/material/', '~@angular/cdk/', '~@angular/material', '~@angular/cdk',
+        '@angular/material/', '@angular/cdk/', '@angular/material', '@angular/cdk',
         undefined, /material\/prebuilt-themes|cdk\/.*-prebuilt/) : content;
 
       if (migratedContent && migratedContent !== content) {
diff --git a/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts b/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts
index 3614c0fa317f..ea25be3030df 100644
--- a/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts
+++ b/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts
@@ -32,7 +32,7 @@ describe('v12 theming API migration', () => {
 
   it('should migrate a theme based on the theming API', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
 
       `@include mat-core();`,
 
@@ -66,7 +66,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
 
       `@include mat.core();`,
 
@@ -100,7 +100,7 @@ describe('v12 theming API migration', () => {
 
   it('should migrate files using CDK APIs through the theming import', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       ``,
       `@include cdk-overlay();`,
       ``,
@@ -119,7 +119,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/cdk' as cdk;`,
+      `@use '@angular/cdk' as cdk;`,
       ``,
       `@include cdk.overlay();`,
       ``,
@@ -138,7 +138,7 @@ describe('v12 theming API migration', () => {
   it('should migrate files using both Material and CDK APIs', async () => {
     writeLines(THEME_PATH, [
       `@import './foo'`,
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       ``,
       `@include cdk-overlay();`,
       `@include mat-core();`,
@@ -162,8 +162,8 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
-      `@use '~@angular/cdk' as cdk;`,
+      `@use '@angular/material' as mat;`,
+      `@use '@angular/cdk' as cdk;`,
       `@import './foo'`,
       ``,
       `@include cdk.overlay();`,
@@ -188,28 +188,28 @@ describe('v12 theming API migration', () => {
 
   it('should detect imports using double quotes', async () => {
     writeLines(THEME_PATH, [
-      `@import "~@angular/material/theming";`,
+      `@import "@angular/material/theming";`,
       `@include mat-core();`,
     ]);
 
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `@include mat.core();`,
     ]);
   });
 
   it('should migrate mixins that are invoked without parentheses', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       `@include mat-base-typography;`,
     ]);
 
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `@include mat.typography-hierarchy;`,
     ]);
   });
@@ -224,7 +224,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `@import 're-exports-material-symbols';`,
       `@include mat.core();`,
       `@include mat.button-theme();`,
@@ -233,14 +233,14 @@ describe('v12 theming API migration', () => {
 
   it('should allow an arbitrary number of spaces after @include and @import', async () => {
     writeLines(THEME_PATH, [
-      `@import                  '~@angular/material/theming';`,
+      `@import                  '@angular/material/theming';`,
       `@include     mat-core;`,
     ]);
 
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `@include mat.core;`,
     ]);
   });
@@ -248,7 +248,7 @@ describe('v12 theming API migration', () => {
   it('should insert the new @use statement above other @import statements', async () => {
     writeLines(THEME_PATH, [
       `@import './foo'`,
-      `@import "~@angular/material/theming";`,
+      `@import "@angular/material/theming";`,
       `@import './bar'`,
       `@include mat-core();`,
     ]);
@@ -256,7 +256,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `@import './foo'`,
       `@import './bar'`,
       `@include mat.core();`,
@@ -267,14 +267,14 @@ describe('v12 theming API migration', () => {
     writeLines(THEME_PATH, [
       `@use './foo'`,
       `@import './bar'`,
-      `@import "~@angular/material/theming";`,
+      `@import "@angular/material/theming";`,
       `@include mat-core();`,
     ]);
 
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `@use './foo'`,
       `@import './bar'`,
       `@include mat.core();`,
@@ -286,7 +286,7 @@ describe('v12 theming API migration', () => {
       writeLines(THEME_PATH, [
         `/** This is a license. */`,
         `@import './foo'`,
-        `@import '~@angular/material/theming';`,
+        `@import '@angular/material/theming';`,
         `@include mat-core();`,
       ]);
 
@@ -294,7 +294,7 @@ describe('v12 theming API migration', () => {
 
       expect(splitFile(THEME_PATH)).toEqual([
         `/** This is a license. */`,
-        `@use '~@angular/material' as mat;`,
+        `@use '@angular/material' as mat;`,
         `@import './foo'`,
         `@include mat.core();`,
       ]);
@@ -305,7 +305,7 @@ describe('v12 theming API migration', () => {
       writeLines(THEME_PATH, [
         `// This is a license.`,
         `@import './foo'`,
-        `@import '~@angular/material/theming';`,
+        `@import '@angular/material/theming';`,
         `@include mat-core();`,
       ]);
 
@@ -313,7 +313,7 @@ describe('v12 theming API migration', () => {
 
       expect(splitFile(THEME_PATH)).toEqual([
         `// This is a license.`,
-        `@use '~@angular/material' as mat;`,
+        `@use '@angular/material' as mat;`,
         `@import './foo'`,
         `@include mat.core();`,
       ]);
@@ -323,12 +323,12 @@ describe('v12 theming API migration', () => {
     const componentPath = join(PROJECT_PATH, 'components/dialog.scss');
 
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       `@include angular-material-theme();`,
     ]);
 
     writeLines(componentPath, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       `.my-dialog {`,
         `z-index: $cdk-z-index-overlay-container + 1;`,
       `}`,
@@ -337,12 +337,12 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `@include mat.all-component-themes();`,
     ]);
 
     expect(splitFile(componentPath)).toEqual([
-      `@use '~@angular/cdk' as cdk;`,
+      `@use '@angular/cdk' as cdk;`,
       `.my-dialog {`,
         `z-index: cdk.$overlay-container-z-index + 1;`,
       `}`,
@@ -351,7 +351,7 @@ describe('v12 theming API migration', () => {
 
   it('should handle variables whose names overlap', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       `$one: $mat-blue-grey;`,
       `$two: $mat-blue;`,
       '$three: $mat-blue',
@@ -361,7 +361,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `$one: mat.$blue-grey-palette;`,
       `$two: mat.$blue-palette;`,
       '$three: mat.$blue-palette',
@@ -371,7 +371,7 @@ describe('v12 theming API migration', () => {
 
   it('should migrate individual component themes', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
 
       `@include mat-core();`,
 
@@ -394,7 +394,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
 
       `@include mat.core();`,
 
@@ -418,13 +418,13 @@ describe('v12 theming API migration', () => {
 
   it('should migrate deep imports', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/core/theming/palette';`,
-      `@import '~@angular/material/core/theming/theming';`,
-      `@import '~@angular/material/button/button-theme';`,
-      `@import '~@angular/material/table/table-theme';`,
-      `@import '~@angular/cdk/overlay';`,
-      `@import '~@angular/material/datepicker/datepicker-theme';`,
-      `@import '~@angular/material/option/option-theme';`,
+      `@import '@angular/material/core/theming/palette';`,
+      `@import '@angular/material/core/theming/theming';`,
+      `@import '@angular/material/button/button-theme';`,
+      `@import '@angular/material/table/table-theme';`,
+      `@import '@angular/cdk/overlay';`,
+      `@import '@angular/material/datepicker/datepicker-theme';`,
+      `@import '@angular/material/option/option-theme';`,
 
       `@include cdk-overlay();`,
 
@@ -446,8 +446,8 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
-      `@use '~@angular/cdk' as cdk;`,
+      `@use '@angular/material' as mat;`,
+      `@use '@angular/cdk' as cdk;`,
 
       `@include cdk.overlay();`,
 
@@ -469,14 +469,14 @@ describe('v12 theming API migration', () => {
 
   it('should migrate usages of @use, with and without namespaces', async () => {
     writeLines(THEME_PATH, [
-      `@use '~@angular/material/core/theming/palette' as palette;`,
-      `@use '~@angular/material/core/theming/theming';`,
-      `@use '~@angular/material/button/button-theme' as button;`,
-      `@use '~@angular/material/table/table-theme' as table;`,
+      `@use '@angular/material/core/theming/palette' as palette;`,
+      `@use '@angular/material/core/theming/theming';`,
+      `@use '@angular/material/button/button-theme' as button;`,
+      `@use '@angular/material/table/table-theme' as table;`,
       // Leave one `@import` here to verify mixed usage.
-      `@import '~@angular/material/option/option-theme';`,
-      `@use '~@angular/cdk/overlay' as cdk;`,
-      `@use '~@angular/material/datepicker/datepicker-theme' as datepicker;`,
+      `@import '@angular/material/option/option-theme';`,
+      `@use '@angular/cdk/overlay' as cdk;`,
+      `@use '@angular/material/datepicker/datepicker-theme' as datepicker;`,
 
       `@include cdk.cdk-overlay();`,
 
@@ -498,8 +498,8 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
-      `@use '~@angular/cdk' as cdk;`,
+      `@use '@angular/material' as mat;`,
+      `@use '@angular/cdk' as cdk;`,
 
       `@include cdk.overlay();`,
 
@@ -521,10 +521,10 @@ describe('v12 theming API migration', () => {
 
   it('should handle edge case inferred Sass import namespaces', async () => {
     writeLines(THEME_PATH, [
-      `@use '~@angular/material/core/index';`,
-      `@use '~@angular/material/button/_button-theme';`,
-      `@use '~@angular/material/table/table-theme.import';`,
-      `@use '~@angular/material/datepicker/datepicker-theme.scss';`,
+      `@use '@angular/material/core/index';`,
+      `@use '@angular/material/button/_button-theme';`,
+      `@use '@angular/material/table/table-theme.import';`,
+      `@use '@angular/material/datepicker/datepicker-theme.scss';`,
 
       `@include core.mat-core();`,
       `@include button-theme.mat-button-theme();`,
@@ -535,7 +535,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
 
       `@include mat.core();`,
       `@include mat.button-theme();`,
@@ -546,7 +546,7 @@ describe('v12 theming API migration', () => {
 
   it('should drop the old import path even if the file is not using any symbols', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       ``,
       `.my-dialog {`,
         `color: red;`,
@@ -564,7 +564,7 @@ describe('v12 theming API migration', () => {
 
   it('should replace removed variables with their values', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       ``,
       `@include mat-button-toggle-theme();`,
       ``,
@@ -584,7 +584,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       ``,
       `@include mat.button-toggle-theme();`,
       ``,
@@ -604,7 +604,7 @@ describe('v12 theming API migration', () => {
 
   it('should not replace assignments to removed variables', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       ``,
       `$mat-button-toggle-standard-height: 50px;`,
       `$mat-button-toggle-standard-minimum-height   : 12px;`,
@@ -617,7 +617,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       ``,
       `$mat-button-toggle-standard-height: 50px;`,
       `$mat-button-toggle-standard-minimum-height   : 12px;`,
@@ -630,7 +630,7 @@ describe('v12 theming API migration', () => {
 
   it('should not migrate files in the node_modules', async () => {
     writeLines('/node_modules/theme.scss', [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       ``,
       `@include mat-button-toggle-theme();`,
       ``,
@@ -639,7 +639,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile('/node_modules/theme.scss')).toEqual([
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       ``,
       `@include mat-button-toggle-theme();`,
       ``,
@@ -650,7 +650,7 @@ describe('v12 theming API migration', () => {
     const otherTheme = join(PROJECT_PATH, 'other-theme.scss');
 
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       ``,
       `.my-button {`,
         `z-index: $z-index-fab;`,
@@ -690,7 +690,7 @@ describe('v12 theming API migration', () => {
         `width: 100%;`,
       `}`,
       ``,
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       ``,
       `.button {`,
         `@include mat-elevation(4);`,
@@ -701,7 +701,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `:host {`,
         `display: block;`,
         `width: 100%;`,
@@ -717,7 +717,7 @@ describe('v12 theming API migration', () => {
 
   it('should migrate extra given mixins and functions', () => {
     const originalContent = [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       `$something: mat-mdc-typography-config();`,
       `@include mat-mdc-button-theme();`,
       `$another: $mat-vermillion`
@@ -725,17 +725,17 @@ describe('v12 theming API migration', () => {
 
     const migratedContent = migrateFileContent(
         originalContent,
-        '~@angular/material/',
-        '~@angular/cdk/',
-        '~@angular/material',
-        '~@angular/cdk', {
+        '@angular/material/',
+        '@angular/cdk/',
+        '@angular/material',
+        '@angular/cdk', {
           mixins: {'mat-mdc-button-theme': 'mdc-button-theme'},
           functions: {'mat-mdc-typography-config': 'mdc-typography-config'},
           variables: {'mat-vermillion': 'vermillion-palette'},
         });
 
     expect(migratedContent).toBe([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `$something: mat.mdc-typography-config();`,
       `@include mat.mdc-button-theme();`,
       `$another: mat.$vermillion-palette`,
@@ -744,26 +744,26 @@ describe('v12 theming API migration', () => {
 
   it('should not drop imports of prebuilt styles', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/prebuilt-themes/indigo-pink.css';`,
-      `@import '~@angular/material/theming';`,
-      `@import '~@angular/cdk/overlay-prebuilt.css';`,
+      `@import '@angular/material/prebuilt-themes/indigo-pink.css';`,
+      `@import '@angular/material/theming';`,
+      `@import '@angular/cdk/overlay-prebuilt.css';`,
       `@include mat-core();`,
     ]);
 
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
-      `@import '~@angular/material/prebuilt-themes/indigo-pink.css';`,
-      `@import '~@angular/cdk/overlay-prebuilt.css';`,
+      `@use '@angular/material' as mat;`,
+      `@import '@angular/material/prebuilt-themes/indigo-pink.css';`,
+      `@import '@angular/cdk/overlay-prebuilt.css';`,
       `@include mat.core();`,
     ]);
   });
 
   it('should not add duplicate @use statements', async () => {
     writeLines(THEME_PATH, [
-      `@use '~@angular/material' as mat;`,
-      `@import '~@angular/material/theming';`,
+      `@use '@angular/material' as mat;`,
+      `@import '@angular/material/theming';`,
       `$something: mat.$red-palette;`,
       `$another: $mat-pink;`,
     ]);
@@ -771,7 +771,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `$something: mat.$red-palette;`,
       `$another: mat.$pink-palette;`,
     ]);
@@ -779,7 +779,7 @@ describe('v12 theming API migration', () => {
 
   it('should insert @use before other code when only Angular imports are first', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       `$something: 123;`,
       `@include mat-core();`,
       `@import 'some/other/file';`,
@@ -788,7 +788,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `$something: 123;`,
       `@include mat.core();`,
       `@import 'some/other/file';`,
@@ -797,7 +797,7 @@ describe('v12 theming API migration', () => {
 
   it('should not rename variables appended with extra characters', async () => {
     writeLines(THEME_PATH, [
-      `@import '~@angular/material/theming';`,
+      `@import '@angular/material/theming';`,
       `$mat-light-theme-background-override: 123;`,
       `@include mat-core();`,
     ]);
@@ -805,7 +805,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `@use '~@angular/material' as mat;`,
+      `@use '@angular/material' as mat;`,
       `$mat-light-theme-background-override: 123;`,
       `@include mat.core();`,
     ]);
@@ -829,21 +829,21 @@ describe('v12 theming API migration', () => {
 
   it('should not migrate commented out code', async () => {
     writeLines(THEME_PATH, [
-      `// @import '~@angular/material/theming';`,
+      `// @import '@angular/material/theming';`,
       '/* @include mat-core(); */',
     ]);
 
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `// @import '~@angular/material/theming';`,
+      `// @import '@angular/material/theming';`,
       '/* @include mat-core(); */',
     ]);
   });
 
   it('should not migrate single-line commented code at the end of the file', async () => {
     writeLines(THEME_PATH, [
-      `// @import '~@angular/material/theming';`,
+      `// @import '@angular/material/theming';`,
       '// @include mat-core();',
       '// @include mat-button-theme();',
     ]);
@@ -851,7 +851,7 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `// @import '~@angular/material/theming';`,
+      `// @import '@angular/material/theming';`,
       '// @include mat-core();',
       '// @include mat-button-theme();',
     ]);
@@ -859,7 +859,7 @@ describe('v12 theming API migration', () => {
 
   it('should handle mixed commented and non-commented content', async () => {
     writeLines(THEME_PATH, [
-      `// @import '~@angular/material/theming';`,
+      `// @import '@angular/material/theming';`,
       '@include mat-core();',
       '@include mat-button-theme();',
     ]);
@@ -867,11 +867,113 @@ describe('v12 theming API migration', () => {
     await runMigration();
 
     expect(splitFile(THEME_PATH)).toEqual([
-      `// @import '~@angular/material/theming';`,
-      `@use '~@angular/material' as mat;`,
+      `// @import '@angular/material/theming';`,
+      `@use '@angular/material' as mat;`,
       '@include mat.core();',
       '@include mat.button-theme();',
     ]);
   });
 
+  it('should migrate files that import using the tilde', async () => {
+    writeLines(THEME_PATH, [
+      `@import './foo'`,
+      `@import '~@angular/material/theming';`,
+      ``,
+      `@include cdk-overlay();`,
+      `@include mat-core();`,
+
+      `$candy-app-primary: mat-palette($mat-indigo);`,
+      `$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);`,
+      `$candy-app-theme: mat-light-theme((`,
+        `color: (`,
+          `primary: $candy-app-primary,`,
+          `accent: $candy-app-accent,`,
+        `)`,
+      `));`,
+
+      `@include angular-material-theme($candy-app-theme);`,
+
+      `.my-dialog {`,
+        `z-index: $cdk-z-index-overlay-container + 1;`,
+      `}`,
+    ]);
+
+    await runMigration();
+
+    expect(splitFile(THEME_PATH)).toEqual([
+      `@use '@angular/material' as mat;`,
+      `@use '@angular/cdk' as cdk;`,
+      `@import './foo'`,
+      ``,
+      `@include cdk.overlay();`,
+      `@include mat.core();`,
+
+      `$candy-app-primary: mat.define-palette(mat.$indigo-palette);`,
+      `$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);`,
+      `$candy-app-theme: mat.define-light-theme((`,
+        `color: (`,
+          `primary: $candy-app-primary,`,
+          `accent: $candy-app-accent,`,
+        `)`,
+      `));`,
+
+      `@include mat.all-component-themes($candy-app-theme);`,
+
+      `.my-dialog {`,
+        `z-index: cdk.$overlay-container-z-index + 1;`,
+      `}`
+    ]);
+  });
+
+  it('should migrate deep imports using a tilde', async () => {
+    writeLines(THEME_PATH, [
+      `@import '~@angular/material/core/theming/palette';`,
+      `@import '~@angular/material/core/theming/theming';`,
+      `@import '~@angular/material/button/button-theme';`,
+      `@import '~@angular/material/table/table-theme';`,
+      `@import '~@angular/cdk/overlay';`,
+      `@import '~@angular/material/datepicker/datepicker-theme';`,
+      `@import '~@angular/material/option/option-theme';`,
+
+      `@include cdk-overlay();`,
+
+      `$candy-app-primary: mat-palette($mat-indigo);`,
+      `$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);`,
+      `$candy-app-theme: mat-light-theme((`,
+        `color: (`,
+          `primary: $candy-app-primary,`,
+          `accent: $candy-app-accent,`,
+        `)`,
+      `));`,
+
+      `@include mat-button-theme($candy-app-theme);`,
+      `@include mat-table-theme($candy-app-theme);`,
+      `@include mat-datepicker-theme($candy-app-theme);`,
+      `@include mat-option-theme($candy-app-theme);`,
+    ]);
+
+    await runMigration();
+
+    expect(splitFile(THEME_PATH)).toEqual([
+      `@use '@angular/material' as mat;`,
+      `@use '@angular/cdk' as cdk;`,
+
+      `@include cdk.overlay();`,
+
+      `$candy-app-primary: mat.define-palette(mat.$indigo-palette);`,
+      `$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);`,
+      `$candy-app-theme: mat.define-light-theme((`,
+        `color: (`,
+          `primary: $candy-app-primary,`,
+          `accent: $candy-app-accent,`,
+        `)`,
+      `));`,
+
+      `@include mat.button-theme($candy-app-theme);`,
+      `@include mat.table-theme($candy-app-theme);`,
+      `@include mat.datepicker-theme($candy-app-theme);`,
+      `@include mat.option-theme($candy-app-theme);`,
+    ]);
+  });
+
 });