diff --git a/src/app/chat/chat-sidebar/chat-sidebar.component.html b/src/app/chat/chat-sidebar/chat-sidebar.component.html
index 400eb61297..ee0cde09de 100644
--- a/src/app/chat/chat-sidebar/chat-sidebar.component.html
+++ b/src/app/chat/chat-sidebar/chat-sidebar.component.html
@@ -2,12 +2,14 @@
   <mat-drawer #drawer mode="side" [opened]="deviceType === deviceTypes.DESKTOP || deviceType === deviceTypes.TABLET">
 
     <div class="header-container">
-      <div class="header">
+      <div class="header flex-vertical-center">
         <button type="button" mat-raised-button color="primary" mat-button (click)="newChat()">
           <mat-icon>add</mat-icon>
           <span i18n>Start New Chat</span>
         </button>
-        <button class="icon-button" *ngIf="deviceType === deviceTypes.DESKTOP" mat-icon-button (click)="drawer.toggle()"><i class="material-icons">chevron_left</i></button>
+        <button class="icon-button" *ngIf="deviceType === deviceTypes.DESKTOP" mat-mini-fab (click)="drawer.toggle()">
+          <mat-icon class="material-icons">chevron_left</mat-icon>
+        </button>
       </div>
       <mat-form-field class="font-size-1 margin-lr-3">
         <input matInput i18n-placeholder placeholder="Search" [(ngModel)]="titleSearch" (input)="onSearchChange($event.target.value)">
@@ -79,8 +81,8 @@
 
   <div class="window-box">
     <div class="expand-button">
-      <button mat-icon-button (click)="drawer.toggle()">
-        <i class="material-icons">{{ drawer.opened && deviceType !== deviceTypes.DESKTOP  ? 'chevron_left' : 'chevron_right' }}</i>
+      <button mat-mini-fab (click)="drawer.toggle()">
+        <mat-icon class="material-icons">{{ drawer.opened && deviceType !== deviceTypes.DESKTOP  ? 'chevron_left' : 'chevron_right' }}</mat-icon>
       </button>
     </div>
     <planet-chat-window [isEditing]="isEditing"></planet-chat-window>
diff --git a/src/app/configuration/configuration.component.ts b/src/app/configuration/configuration.component.ts
index e67de40b4f..5a6573063e 100644
--- a/src/app/configuration/configuration.component.ts
+++ b/src/app/configuration/configuration.component.ts
@@ -24,7 +24,7 @@ const removeProtocol = (str: string) => {
   selector: 'planet-configuration',
   templateUrl: './configuration.component.html',
   styles: [ `
-    .mat-raised-button {
+    .mat-mdc-raised-button {
       margin: 0px 2px 2px 0px;
     }
     .configuration-form {
diff --git a/src/app/configuration/migration.component.ts b/src/app/configuration/migration.component.ts
index 12b1c08538..a431a76e88 100755
--- a/src/app/configuration/migration.component.ts
+++ b/src/app/configuration/migration.component.ts
@@ -23,7 +23,7 @@ const getProtocol = (str: string) => /^[^:]+(?=:\/\/)/.exec(str)[0];
   selector: 'planet-migration',
   templateUrl: './migration.component.html',
   styles: [ `
-    .mat-raised-button {
+    .mat-mdc-raised-button {
       margin: 0px 2px 2px 0px;
     }
     .configuration-form {
diff --git a/src/app/dashboard/dashboard-tile.component.ts b/src/app/dashboard/dashboard-tile.component.ts
index 550a6cf759..613c35595d 100644
--- a/src/app/dashboard/dashboard-tile.component.ts
+++ b/src/app/dashboard/dashboard-tile.component.ts
@@ -165,9 +165,9 @@ export class DashboardTileComponent implements AfterViewChecked, OnInit {
 
 @Component({
   selector: 'planet-dashboard-tile-title',
-  template: `
-    <mat-icon svgIcon={{cardType}}></mat-icon>
-    <span>{{cardTitle}}</span>
+  template: `
+    <mat-icon svgIcon={{cardType}}></mat-icon>
+    <span>{{cardTitle}}</span>
   `,
   styleUrls: [ './dashboard-tile-title.scss' ]
 })
diff --git a/src/app/dashboard/dashboard-tile.scss b/src/app/dashboard/dashboard-tile.scss
index cf26867a94..4cf0fdc646 100644
--- a/src/app/dashboard/dashboard-tile.scss
+++ b/src/app/dashboard/dashboard-tile.scss
@@ -60,6 +60,10 @@
             position: absolute;
             top: -0.25rem;
             right: -0.25rem;
+            --mat-mdc-button-persistent-ripple-color: auto;
+            > .mat-icon {
+              width: auto;
+            }
           }
           p {
             margin: 0;
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index d103b66276..7130081deb 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -11,10 +11,10 @@
     </a>
     <div class="dashboard-name" style="margin-left: 16px;">
       <a [routerLink]="['/users/profile', user.name]" class="profile-link">
-        <h1 class="mat-title">{{displayName | truncateText:(isMobile ? 20 : 40)}} <span *ngIf="!isLoading">({{visits | number}})</span></h1>
+        <h1 class="mat-headline-6">{{displayName | truncateText:(isMobile ? 20 : 40)}} <span *ngIf="!isLoading">({{visits | number}})</span></h1>
       </a>
-      <h1 class="mat-title">
-        <span class="mat-subheading-2">
+      <h1 class="mat-headline-6">
+        <span class="mat-subtitle-1">
           <ng-container *ngFor="let role of roles; last as last">
             <planet-role [role]="role"></planet-role><span *ngIf="!last">, </span>
           </ng-container>
diff --git a/src/app/dashboard/dashboard.scss b/src/app/dashboard/dashboard.scss
index 99896477d5..68f42b477f 100644
--- a/src/app/dashboard/dashboard.scss
+++ b/src/app/dashboard/dashboard.scss
@@ -50,7 +50,7 @@ $top-row-height: calc(#{$dashboard-tile-width} + 0.5rem);
         display: flex;
         align-items: center;
       }
-      .mat-subheading-2 {
+      .mat-subtitle-1 {
         margin: 0;
       }
       span {
diff --git a/src/app/health/health-update.component.html b/src/app/health/health-update.component.html
index c17ffd1a06..95fdb63117 100644
--- a/src/app/health/health-update.component.html
+++ b/src/app/health/health-update.component.html
@@ -45,7 +45,7 @@
         </mat-form-field>
       </form>
       <form class="form-spacing" [formGroup]="healthForm">
-        <span class="full-width primary-text-color mat-body-2" i18n>Emergency Contact</span>
+        <span class="full-width primary-text-color mat-subtitle-2" i18n>Emergency Contact</span>
         <mat-form-field>
           <input matInput i18n-placeholder placeholder="Name" formControlName="emergencyContactName">
         </mat-form-field>
diff --git a/src/app/home/home.scss b/src/app/home/home.scss
index f03168e215..56ae3cacce 100644
--- a/src/app/home/home.scss
+++ b/src/app/home/home.scss
@@ -138,6 +138,7 @@
     display: inline;
 
     li {
+      text-align: left;
       a {
         border-radius: 0;
       }
@@ -148,6 +149,7 @@
         color: $primary;
         transition: background-color 0.5s cubic-bezier(0, 0, 0.2, 1),
           color 0.5s cubic-bezier(0, 0, 0.2, 1); // Linear out, slow in;
+        /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
         .mat-button-focus-overlay {
           background-color: rgba(0, 0, 0, 0.06);
           transition: background-color 1s ease-in;
@@ -169,20 +171,34 @@
   a {
     width: 100%;
     min-width: 0;
-    text-align: left;
+    display: grid;
+    grid-template-columns: 47px auto;
+    justify-content: start;
+    white-space: nowrap;
     // Fixed height so text visibility doesn't add pixel
     height: 36px;
     // align with top mat-icon-button
     padding: 0 24px;
+    color: $white;
+
+    > * {
+      vertical-align: middle;
+    }
+
+    .mat-icon {
+      height: 24px;
+      width: 24px;
+      margin: 0;
+    }
 
     label {
       cursor: pointer;
-      margin: 0 24px;
       display: inline-block;
       max-width: 12ch;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      letter-spacing: 0;
     }
   }
 
diff --git a/src/app/manager-dashboard/manager-dashboard.scss b/src/app/manager-dashboard/manager-dashboard.scss
index d8d4df44a1..78c5c3b4ff 100644
--- a/src/app/manager-dashboard/manager-dashboard.scss
+++ b/src/app/manager-dashboard/manager-dashboard.scss
@@ -16,7 +16,7 @@
   padding-top: 0;
 }
 
-.mat-raised-button {
+.mat-mdc-raised-button {
   margin: 0.25rem;
 }
 
diff --git a/src/app/manager-dashboard/manager-sync.component.html b/src/app/manager-dashboard/manager-sync.component.html
index d3cc5422d3..481116a148 100644
--- a/src/app/manager-dashboard/manager-sync.component.html
+++ b/src/app/manager-dashboard/manager-sync.component.html
@@ -5,7 +5,7 @@
 <div class="space-container primary-link-hover">
   <mat-toolbar class="primary-color font-size-1">
     <span class="toolbar-fill"></span>
-    <button mat-button planetSync (syncComplete)="getReplicators()" i18n><mat-icon svgIcon="sync"></mat-icon>Run Sync</button>
+    <button mat-button planetSync (syncComplete)="getReplicators()" i18n><mat-icon svgIcon="sync" class="svg-icon"></mat-icon>Run Sync</button>
     <button mat-button (click)="getReplicators()" i18n><mat-icon>refresh</mat-icon>Refresh</button>
   </mat-toolbar>
   <mat-list>
diff --git a/src/app/manager-dashboard/manager-sync.component.ts b/src/app/manager-dashboard/manager-sync.component.ts
index af94701713..bbd85863ed 100644
--- a/src/app/manager-dashboard/manager-sync.component.ts
+++ b/src/app/manager-dashboard/manager-sync.component.ts
@@ -4,7 +4,14 @@ import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service
 import { forkJoin } from 'rxjs';
 
 @Component({
-  templateUrl: './manager-sync.component.html'
+  templateUrl: './manager-sync.component.html',
+  styles: [
+    `
+      .mat-mdc-button > .mat-icon.svg-icon {
+        height: inherit;
+      }
+    `
+  ]
 })
 
 export class ManagerSyncComponent implements OnInit {
diff --git a/src/app/manager-dashboard/reports/reports-detail.component.html b/src/app/manager-dashboard/reports/reports-detail.component.html
index ed253e6ffd..c4f4c6ce47 100644
--- a/src/app/manager-dashboard/reports/reports-detail.component.html
+++ b/src/app/manager-dashboard/reports/reports-detail.component.html
@@ -135,7 +135,7 @@
         <canvas id="voicesCreatedChart"></canvas>
         <div class="reports-table-container">
           <div>
-            <h1 class="mat-title" i18n>Members</h1>
+            <h1 class="mat-headline-6" i18n>Members</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Members</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalUsers}}</mat-grid-tile>
@@ -171,7 +171,7 @@ <h1 class="mat-title" i18n>Members</h1>
             </mat-grid-list>
           </div>
           <div>
-            <h1 class="mat-title" i18n>Resources</h1>
+            <h1 class="mat-headline-6" i18n>Resources</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Resources</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalResources}}</mat-grid-tile>
@@ -204,7 +204,7 @@ <h1 class="mat-title" i18n>Resources</h1>
             </mat-grid-list>
           </div>
           <div>
-            <h1 class="mat-title" i18n>Courses</h1>
+            <h1 class="mat-headline-6" i18n>Courses</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Courses</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalCourses}}</mat-grid-tile>
diff --git a/src/app/manager-dashboard/reports/reports-detail.scss b/src/app/manager-dashboard/reports/reports-detail.scss
index 75133d45f0..04b72bb2e9 100644
--- a/src/app/manager-dashboard/reports/reports-detail.scss
+++ b/src/app/manager-dashboard/reports/reports-detail.scss
@@ -78,11 +78,12 @@ mat-toolbar mat-form-field {
   .mat-form-field {
     width: 100%;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
   mat-button-toggle-group {
     width: 100%;
     display: flex;
-
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
     .mat-button-toggle {
       flex: 1;
     }
diff --git a/src/app/manager-dashboard/reports/reports-health.component.html b/src/app/manager-dashboard/reports/reports-health.component.html
index b97a3250d1..1f981d60fe 100644
--- a/src/app/manager-dashboard/reports/reports-health.component.html
+++ b/src/app/manager-dashboard/reports/reports-health.component.html
@@ -5,13 +5,13 @@
   <div>
     <span><b i18n>Patients Seen:</b> {{headlineData?.unique.length}}</span>
   </div>
-  <h1 class="mat-title" i18n>Diagnoses</h1>
+  <h1 class="mat-headline-6" i18n>Diagnoses</h1>
   <div>
     <span *ngFor="let condition of conditions">
       <planet-label [label]="condition"></planet-label>: {{headlineData?.conditions[condition]}}
     </span>
   </div>
-  <h1 class="mat-title" i18n>Diagnosis Trend</h1>
+  <h1 class="mat-headline-6" i18n>Diagnosis Trend</h1>
   <div class="trend-filters">
     <span i18n>Select diagnosis to view trend:</span>
     <mat-form-field>
@@ -25,7 +25,7 @@ <h1 class="mat-title" i18n>Diagnosis Trend</h1>
   <div *ngIf="showChart" class="chart-container">
     <canvas id="diagnosesTrend" #diagnosesChart></canvas>
   </div>
-  <h1 class="mat-title" i18n>Weekly Data</h1>
+  <h1 class="mat-headline-6" i18n>Weekly Data</h1>
   <planet-reports-detail-activities
     [activitiesByDoc]="weeklyHealthData"
     activityType="health"
diff --git a/src/app/manager-dashboard/reports/reports.component.ts b/src/app/manager-dashboard/reports/reports.component.ts
index a3dc0bf236..2453c0473d 100644
--- a/src/app/manager-dashboard/reports/reports.component.ts
+++ b/src/app/manager-dashboard/reports/reports.component.ts
@@ -12,10 +12,10 @@ import { trackById } from '../../shared/table-helpers';
 
 @Component({
   templateUrl: './reports.component.html',
-  styles: [ `
-    mat-panel-title {
-      align-items: center;
-    }
+  styles: [ `
+    mat-panel-title {
+      align-items: center;
+    }
   ` ],
   styleUrls: [ './reports.components.scss' ]
 })
diff --git a/src/app/meetups/add-meetups/meetups-add.component.ts b/src/app/meetups/add-meetups/meetups-add.component.ts
index ba8e24a652..cbd1e4c446 100644
--- a/src/app/meetups/add-meetups/meetups-add.component.ts
+++ b/src/app/meetups/add-meetups/meetups-add.component.ts
@@ -24,14 +24,14 @@ import { debounce } from 'rxjs/operators';
 @Component({
   selector: 'planet-meetups-add',
   templateUrl: './meetups-add.component.html',
-  styles: [ `
-    form.form-spacing {
-      width: inherit;
-    }
-    .view-container form {
-      min-width: 385px;
-      max-width: 750px;
-    }
+  styles: [ `
+    form.form-spacing {
+      width: inherit;
+    }
+    .view-container form {
+      min-width: 385px;
+      max-width: 750px;
+    }
   ` ]
 })
 export class MeetupsAddComponent implements OnInit, CanComponentDeactivate {
diff --git a/src/app/meetups/meetups.component.ts b/src/app/meetups/meetups.component.ts
index 33bff97bdb..8cdf121d4d 100644
--- a/src/app/meetups/meetups.component.ts
+++ b/src/app/meetups/meetups.component.ts
@@ -17,15 +17,15 @@ import { findByIdInArray } from '../shared/utils';
 
 @Component({
   templateUrl: './meetups.component.html',
-  styles: [ `
-    /* Column Widths */
-    .mat-column-select {
-      max-width: 44px;
-    }
-    .mat-column-info {
-      max-width: 500px;
-      align-self: flex-start;
-    }
+  styles: [ `
+    /* Column Widths */
+    .mat-column-select {
+      max-width: 44px;
+    }
+    .mat-column-info {
+      max-width: 500px;
+      align-self: flex-start;
+    }
   ` ]
 })
 export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {
diff --git a/src/app/news/news-list-item.component.html b/src/app/news/news-list-item.component.html
index ef7f295a88..49464ed177 100644
--- a/src/app/news/news-list-item.component.html
+++ b/src/app/news/news-list-item.component.html
@@ -64,9 +64,9 @@
       </button>
     </div>
   </mat-card-content>
-  <mat-card-actions class="display-flex">
+  <mat-card-actions class="flex-vertical-center">
     <img [src]="item.avatar" class="cursor-pointer profile-outline" (click)="openMemberDialog(item.doc.user)">
-      <button mat-button type="button" class="cursor-pointer user-name-truncate" (click)="openMemberDialog(item.doc.user)">
+      <button mat-button type="button" class="cursor-pointer user-name-truncate margin-lr-8" (click)="openMemberDialog(item.doc.user)">
       <span class="user-name-truncate-text ellipsis">
         {{item.doc.user.firstName ?
           item.doc.user.firstName + ((" " + item.doc.user.middleName) || '') + ' ' + item.doc.user.lastName :
diff --git a/src/app/news/news-list-item.scss b/src/app/news/news-list-item.scss
index f234e87056..1deacdea0e 100644
--- a/src/app/news/news-list-item.scss
+++ b/src/app/news/news-list-item.scss
@@ -62,13 +62,13 @@ mat-chip {
 
 .user-name-truncate {
   flex: 1 1 0;
+  justify-content: start;
 }
 
 .user-name-truncate-text {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-align: left;
 }
 
 @media (max-width: $screen-xs) {
diff --git a/src/app/page-not-found/page-not-found.component.ts b/src/app/page-not-found/page-not-found.component.ts
index 086051f0c4..ba53b900c4 100644
--- a/src/app/page-not-found/page-not-found.component.ts
+++ b/src/app/page-not-found/page-not-found.component.ts
@@ -3,13 +3,13 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'planet-page-not-found',
   templateUrl: './page-not-found.component.html',
-  styles: [ `
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding-top: 10vh;
-    }
+  styles: [ `
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 10vh;
+    }
   ` ]
 })
 export class PageNotFoundComponent {
diff --git a/src/app/resources/resources.scss b/src/app/resources/resources.scss
index f5d992dd94..4f86247a1a 100644
--- a/src/app/resources/resources.scss
+++ b/src/app/resources/resources.scss
@@ -35,7 +35,7 @@ $label-height: 1rem;
     height: calc(#{$view-container-height} - #{$toolbar-height});
   }
 
-  .mat-button, .mat-stroked-button {
+  .mat-mdc-button, .mat-mdc-outlined-button {
     min-width: auto;
   }
 
diff --git a/src/app/shared/dialogs/dialogs-submissions.component.ts b/src/app/shared/dialogs/dialogs-submissions.component.ts
index 41a1bf708b..2f8e4eee46 100644
--- a/src/app/shared/dialogs/dialogs-submissions.component.ts
+++ b/src/app/shared/dialogs/dialogs-submissions.component.ts
@@ -3,7 +3,7 @@ import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/leg
 
 @Component({
   template: `
-    <h3 mat-dialog-title i18n class="mat-subheading-2">Review Previous Test Attempts</h3>
+    <h3 mat-dialog-title i18n class="mat-subtitle-1">Review Previous Test Attempts</h3>
     <mat-dialog-content>
       <planet-submissions *ngIf="view==='list'" [isDialog]="true" [parentId]="data.parentId"
         [displayedColumns]="[ 'lastUpdateTime', 'gradeTime', 'grade', 'status' ]" (submissionClick)="showSubmission($event)">
diff --git a/src/app/shared/forms/planet-rating-stars.component.ts b/src/app/shared/forms/planet-rating-stars.component.ts
index 657f13d293..722ab038ce 100644
--- a/src/app/shared/forms/planet-rating-stars.component.ts
+++ b/src/app/shared/forms/planet-rating-stars.component.ts
@@ -8,13 +8,13 @@ import { UserService } from '../user.service';
 @Component({
   selector: 'planet-rating-stars',
   templateUrl: './planet-rating-stars.component.html',
-  styles: [ `
-    .stars mat-icon {
-      cursor: default;
-    }
-    .stars.stars-enabled mat-icon {
-      cursor: pointer;
-    }
+  styles: [ `
+    .stars mat-icon {
+      cursor: default;
+    }
+    .stars.stars-enabled mat-icon {
+      cursor: pointer;
+    }
   ` ],
   providers: [
     { provide: MatFormFieldControl, useExisting: PlanetRatingStarsComponent }
diff --git a/src/app/shared/forms/planet-tag-input-dialog.component.html b/src/app/shared/forms/planet-tag-input-dialog.component.html
index 0f72c8b71b..3977920cd1 100644
--- a/src/app/shared/forms/planet-tag-input-dialog.component.html
+++ b/src/app/shared/forms/planet-tag-input-dialog.component.html
@@ -19,7 +19,7 @@
         <mat-select i18n-placeholder placeholder="Subcollection of..." formControlName="attachedTo">
           <mat-option i18n>None</mat-option>
           <mat-option *ngFor="let tag of tags" [value]="tag._id || tag.name">
-            <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+            <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
             <span class="count">({{ tag.count || 0 }})</span>
           </mat-option>
         </mat-select>
@@ -32,7 +32,7 @@
       <mat-list-item (click)="tag.subTags.length === 0 ? tagChange(tag._id || tag.name) : toggleSubcollection($event, tag._id)" class="cursor-pointer list-item-spacing">
         <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)" class="icon-spacing"></planet-tag-input-toggle-icon>
         <mat-checkbox *ngIf="tag.subTags.length === 0" (change)="checkboxChange($event, tag._id || tag.name)" [checked]="isInMap(tag._id || tag.name, selected)" [indeterminate]="isInMap(tag._id || tag.name, indeterminate)" class="checkbox-spacing"></mat-checkbox>
-        <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+        <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
         <span class="count">({{ tag.count || 0 }})</span>
         <span class="toolbar-fill"></span>
         <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event, tag)" i18n class="button-spacing">Edit</button>
@@ -44,7 +44,7 @@
         <mat-list-item *ngFor="let subTag of tag.subTags" (click)="tagChange(subTag._id || subTag.name, { parentTag: tag })" class="cursor-pointer list-item-spacing">
           <mat-icon mat-list-icon class="icon-spacing">subdirectory_arrow_right</mat-icon>
           <mat-checkbox (change)="checkboxChange($event, subTag._id || subTag.name)" [checked]="isInMap(subTag._id || subTag.name, selected)" [indeterminate]="isInMap(subTag._id || subTag.name, indeterminate)" class="checkbox-spacing"></mat-checkbox>
-          <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+          <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
           <span class="count">({{ tag.count || 0 }})</span>
           <span class="toolbar-fill"></span>
           <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event, subTag)" i18n class="button-spacing">Edit</button>
@@ -58,7 +58,7 @@
     <mat-list-item (click)="selectOne('')" i18n>All</mat-list-item>
     <ng-container *ngFor="let tag of tags">
       <mat-list-item class="tag-text" (click)="tag.subTags.length === 0 ? selectOne(tag._id || tag.name) : toggleSubcollection($event, tag._id)" [ngClass]="{ 'mat-body-2': tag.subTags.length > 0 }">
-        <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+        <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
         <span class="count">({{ tag.count || 0 }})</span>
         <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)"></planet-tag-input-toggle-icon>
         <span class="toolbar-fill"></span>
@@ -70,7 +70,7 @@
       <ng-container *ngIf="subcollectionIsOpen.get(tag._id)">
         <mat-list-item *ngFor="let subTag of tag.subTags" (click)="selectOne(subTag._id || subTag.name)">
           <mat-icon>subdirectory_arrow_right</mat-icon>
-          <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+          <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
           <span class="count">({{ tag.count || 0 }})</span>
           <span class="toolbar-fill"></span>
           <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,subTag)" i18n>Edit</button>
diff --git a/src/app/shared/material.module.ts b/src/app/shared/material.module.ts
index 2047f27231..ebe6bcf27b 100644
--- a/src/app/shared/material.module.ts
+++ b/src/app/shared/material.module.ts
@@ -2,7 +2,7 @@ import { NgModule, Injectable } from '@angular/core';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
diff --git a/src/app/shared/planet-filtered-amount.component.ts b/src/app/shared/planet-filtered-amount.component.ts
index dccd0fb130..7abdb28bb0 100644
--- a/src/app/shared/planet-filtered-amount.component.ts
+++ b/src/app/shared/planet-filtered-amount.component.ts
@@ -3,13 +3,13 @@ import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/materia
 
 @Component({
   template:  `
-    <span class="margin-lr-5"><ng-container i18n>Showing {{table.filteredData.length}} of {{table.data.length}} </ng-container>
-      <ng-container i18n>{labelFor, select,
-        resources {{table.data.length, plural, =0 {resources} =1 {resource} other {resources}}}
-        courses {{table.data.length, plural, =0 {courses} =1 {course} other {courses}}}
-      }</ng-container>
-    </span>
-  `,
+     <span class="margin-lr-5"><ng-container i18n>Showing {{table.filteredData.length}} of {{table.data.length}} </ng-container>
+       <ng-container i18n>{labelFor, select,
+         resources {{table.data.length, plural, =0 {resources} =1 {resource} other {resources}}}
+         courses {{table.data.length, plural, =0 {courses} =1 {course} other {courses}}}
+       }</ng-container>
+     </span>
+   `,
   selector: 'planet-filtered-amount'
 })
 export class FilteredAmountComponent {
diff --git a/src/app/shared/planet-language.component.ts b/src/app/shared/planet-language.component.ts
index c77b58ffa6..458843b760 100644
--- a/src/app/shared/planet-language.component.ts
+++ b/src/app/shared/planet-language.component.ts
@@ -5,7 +5,8 @@ import { Router } from '@angular/router';
 
 @Component({
   selector: 'planet-language',
-  templateUrl: './planet-language.component.html'
+  templateUrl: './planet-language.component.html',
+  styleUrls: [ './planet-language.scss' ]
 })
 export class PlanetLanguageComponent implements OnInit {
 
diff --git a/src/app/shared/planet-language.scss b/src/app/shared/planet-language.scss
new file mode 100644
index 0000000000..d4398aa9f6
--- /dev/null
+++ b/src/app/shared/planet-language.scss
@@ -0,0 +1,5 @@
+@use '../variables' as theme;
+
+mat-icon {
+  color: theme.$primary-text;
+}
\ No newline at end of file
diff --git a/src/app/tasks/tasks.scss b/src/app/tasks/tasks.scss
index 14e3ba9115..0b89a6a94d 100644
--- a/src/app/tasks/tasks.scss
+++ b/src/app/tasks/tasks.scss
@@ -26,10 +26,11 @@ planet-tasks {
   .deadline-passed{
     color: red
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
   mat-button-toggle-group {
     font-size: 14px;
-
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
     .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
       line-height: 34px;
     }
diff --git a/src/app/teams/teams-reports-dialog.component.html b/src/app/teams/teams-reports-dialog.component.html
index e2d00fd271..10a0180374 100644
--- a/src/app/teams/teams-reports-dialog.component.html
+++ b/src/app/teams/teams-reports-dialog.component.html
@@ -1,6 +1,6 @@
 <div mat-dialog-header>
   <h3>{{teamName}} <ng-container i18n>Financial Report</ng-container></h3>
-  <p class="mat-subheading-1">{{ report.startDate | date : 'mediumDate' : '+0000' }} - {{ report.endDate | date : 'mediumDate' : '+0000' }}</p>
+  <p class="mat-body-1">{{ report.startDate | date : 'mediumDate' : '+0000' }} - {{ report.endDate | date : 'mediumDate' : '+0000' }}</p>
 </div>
 <mat-dialog-content>
   <planet-teams-reports-detail [report]="report" [showSummary]="true"></planet-teams-reports-detail>
diff --git a/src/app/teams/teams-reports-dialog.component.ts b/src/app/teams/teams-reports-dialog.component.ts
index 5ea3b617a1..2e1a8bf4bc 100644
--- a/src/app/teams/teams-reports-dialog.component.ts
+++ b/src/app/teams/teams-reports-dialog.component.ts
@@ -7,7 +7,7 @@ import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/leg
     h3 {
       margin-bottom: 0;
     }
-    .mat-subheading-1 {
+    .mat-body-1 {
       margin-top: 0;
     }
   ` ]
diff --git a/src/app/teams/teams-view.component.html b/src/app/teams/teams-view.component.html
index 26d490641f..86522827f2 100644
--- a/src/app/teams/teams-view.component.html
+++ b/src/app/teams/teams-view.component.html
@@ -78,11 +78,11 @@ <h3 *ngIf="mode==='services'" class="margin-lr-3 ellipsis-title">{{configuration
           { mode, select, team {Plan} enterprise {Mission & Services} services {Services} }
         </ng-template>
         <ng-container *ngIf="(team?.description || team?.services || team?.rules); else emptyText">
-          <div class="mat-title" *ngIf="team?.description && mode === 'enterprise'" i18n>What is your enterprise's Mission?</div>
+          <div class="mat-headline-6" *ngIf="team?.description && mode === 'enterprise'" i18n>What is your enterprise's Mission?</div>
           <td-markdown [content]="team.description"></td-markdown>
-          <div class="mat-title" *ngIf="team?.services" i18n>What are the Services your enterprise provides?</div>
+          <div class="mat-headline-6" *ngIf="team?.services" i18n>What are the Services your enterprise provides?</div>
           <td-markdown [content]="team.services"></td-markdown>
-          <div class="mat-title" *ngIf="team?.rules" i18n>What are the Rules of your enterprise?</div>
+          <div class="mat-headline-6" *ngIf="team?.rules" i18n>What are the Rules of your enterprise?</div>
           <td-markdown [content]="team.rules"></td-markdown>
         </ng-container>
         <ng-template #emptyText>
@@ -179,7 +179,7 @@ <h4 i18n>Members ({{members.length}})</h4>
           <ng-template #resourceList>
             <div class="card-grid">
               <mat-card *ngFor="let resource of resources" (click)="resource.resource._attachments ? openResource(resource.resource._id) : false" i18n-matTooltip matTooltip="There is no content for this resource" [matTooltipDisabled]="resource.resource._attachments" [ngClass]="{'cursor-pointer': resource.resource._attachments}">
-                <div class="mat-subheading-2">
+                <div class="mat-subtitle-1">
                   <span *ngIf="resource.resource!==undefined">
                     <b>{{resource.resource.title | truncateText:75}}</b>
                   </span>
@@ -216,7 +216,7 @@ <h4 i18n>Members ({{members.length}})</h4>
           <ng-template #courseList>
             <div class="card-grid">
               <mat-card *ngFor="let course of team?.courses" (click)="openCourseView(course._id)" class="cursor-pointer">
-                <div class="mat-subheading-2">
+                <div class="mat-subtitle-1">
                   <b>{{course.courseTitle | truncateText:75}}</b>
                 </div>
                 <mat-card-content>
diff --git a/src/app/teams/teams-view.scss b/src/app/teams/teams-view.scss
index 7d30ba08f9..c452279d6f 100644
--- a/src/app/teams/teams-view.scss
+++ b/src/app/teams/teams-view.scss
@@ -43,7 +43,7 @@
     margin: 0;
   }
 
-  .mat-subheading-2 b {
+  .mat-subtitle-1 b {
     display: inline-block;
     max-width: 100%;
     white-space: nowrap;
diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts
index b888ccd491..838c4a745d 100644
--- a/src/app/users/users.component.ts
+++ b/src/app/users/users.component.ts
@@ -15,15 +15,15 @@ import { DeviceInfoService, DeviceType } from '../shared/device-info.service';
 @Component({
   selector: 'planet-users',
   templateUrl: './users.component.html',
-  styles: [ `
-    /* Column Widths */
-    .mat-column-select {
-      max-width: 44px;
-    }
-
-    .mat-column-profile {
-      max-width: 100px;
-    }
+  styles: [ `
+    /* Column Widths */
+    .mat-column-select {
+      max-width: 44px;
+    }
+
+    .mat-column-profile {
+      max-width: 100px;
+    }
   ` ]
 })
 export class UsersComponent implements OnInit, OnDestroy {
diff --git a/src/planet-mat-theme.scss b/src/planet-mat-theme.scss
index f38398d6cd..9f1e05495c 100644
--- a/src/planet-mat-theme.scss
+++ b/src/planet-mat-theme.scss
@@ -12,13 +12,20 @@
 //  If you specify typography styles for the components you use elsewhere, you should delete this line.
 //  If you don't need the default component typographies but still want the hierarchy styles,
 //  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+/* TODO(mdc-migration): Remove all-legacy-component-typographies once all legacy components are migrated*/
 @include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
+@include mat.all-component-typographies();
+/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
+@include mat.legacy-core();
+@include mat.core();
 @import './app/_variables';
 
+/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
 @include mat.all-legacy-component-themes($planet-app-theme);
 
+@include mat.all-component-themes($planet-app-theme);
+
 // Create sub-themes for the different sections which change the accent color.
 $accent-map: (
   library: mat.define-palette(mat.$pink-palette, $accent-hue),
@@ -30,8 +37,10 @@ $accent-map: (
 @each $section in library, courses, meetups, teams {
   $accent-palette: map-get($accent-map, #{$section});
   $theme: mat.define-light-theme($planet-app-primary, $accent-palette, $planet-app-warn);
-  .planet-#{$section}-theme {
+  .planet-#{$section}-theme {
+    /* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
     @include mat.all-legacy-component-themes($theme);
+    @include mat.all-component-themes($theme);
 
     .accent-color {
       background-color: mat.get-color-from-palette($accent-palette, $accent-hue);
@@ -42,18 +51,19 @@ $accent-map: (
 
 // Custom themed material styles below
 
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
 .mat-button-toggle-checked {
   background-color: mat.get-color-from-palette($planet-app-primary, $light-hue);
   color: mat.get-contrast-color-from-palette($planet-app-primary, $light-hue);
 }
 
-.mat-raised-button[color="primary"] {
+.mat-mdc-raised-button[color="primary"] {
   transition: background-color 0.3s ease;
   &:hover {
     background-color: mat.get-color-from-palette($planet-app-primary, $dark-hue);
   }
 }
 
-.mat-raised-button[color="primary"][disabled] {
+.mat-mdc-raised-button[color="primary"][disabled] {
   pointer-events: none;
 }
diff --git a/src/styles.scss b/src/styles.scss
index 75c573c212..896e5f26b9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -183,6 +183,17 @@ body {
 
   }
 
+  .mat-mdc-button, .mdc-button {
+    letter-spacing: normal;
+  }
+
+  // Fix for new MDC icon buttons being used in old style inputs.
+  // May need to change after converting forms to MDC.
+  .mat-form-field-suffix button .mat-icon {
+    font-size: 100%;
+    line-height: 1;
+  }
+
   .mat-row.expanded-row {
     border: none;
   }
@@ -454,7 +465,7 @@ body {
 
   mat-row mat-cell {
     flex-wrap: wrap;
-    .mat-raised-button {
+    .mat-mdc-raised-button {
       margin: 0.125rem 0.25rem 0.125rem 0;
     }
   }
@@ -488,7 +499,7 @@ body {
     }
   }
 
-  .radio-icon-label {
+  .radio-icon-label, .flex-vertical-center {
     display: flex;
     align-items: center;
   }