diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css
index 7123ff1f8681..2fff94ff117b 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css
@@ -14,6 +14,7 @@
   position: relative;
   z-index: 1;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  font-family: sans-serif;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.css
index aa7b8cb7a090..0489d9d0ec48 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.css
@@ -16,6 +16,7 @@
   box-sizing: border-box;
   padding: 10px;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  font-family: sans-serif;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css
index 81ffa9305f01..af4470456b4a 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css
@@ -4,6 +4,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  font-family: sans-serif;
 }
 
 .example-list {
@@ -27,6 +28,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css
index 81ffa9305f01..af4470456b4a 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css
@@ -4,6 +4,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  font-family: sans-serif;
 }
 
 .example-list {
@@ -27,6 +28,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example.css
index 831122b5e934..69c23ec04896 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example.css
@@ -4,6 +4,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  font-family: sans-serif;
 }
 
 .example-list {
@@ -27,6 +28,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.css
index ff2e445b8ccc..c8ae685d5f09 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.css
@@ -7,6 +7,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -21,6 +22,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css
index 8e55bdbb9a65..62cc39f5cc89 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css
@@ -7,6 +7,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -21,6 +22,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-delay/cdk-drag-drop-delay-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-delay/cdk-drag-drop-delay-example.css
index 1e725e0ee13c..bc7616b91eb7 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-delay/cdk-drag-drop-delay-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-delay/cdk-drag-drop-delay-example.css
@@ -12,6 +12,7 @@
   border-radius: 4px;
   position: relative;
   z-index: 1;
+  font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.css
index 81ffa9305f01..af4470456b4a 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.css
@@ -4,6 +4,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  font-family: sans-serif;
 }
 
 .example-list {
@@ -27,6 +28,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css
index ba8046b9093e..aa61e07b1e13 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css
@@ -7,6 +7,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -21,6 +22,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .example-box.cdk-drag-disabled {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.css
index 81ffa9305f01..af4470456b4a 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.css
@@ -4,6 +4,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  font-family: sans-serif;
 }
 
 .example-list {
@@ -27,6 +28,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example.css
index 1e725e0ee13c..bc7616b91eb7 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example.css
@@ -12,6 +12,7 @@
   border-radius: 4px;
   position: relative;
   z-index: 1;
+  font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.css
index a11481e2585f..f99e4c193e4b 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.css
@@ -13,6 +13,7 @@
   border-radius: 4px;
   position: relative;
   z-index: 1;
+  font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
@@ -29,8 +30,11 @@
   position: absolute;
   top: 10px;
   right: 10px;
-  color: #ccc;
   cursor: move;
   width: 24px;
   height: 24px;
 }
+
+.example-handle svg {
+  color: #ccc;
+}
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.html
index 368f748ea396..2d1798df80d1 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.html
@@ -2,7 +2,7 @@
   I can only be dragged using the handle
 
   <div class="example-handle" cdkDragHandle>
-    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
+    <svg width="24px" viewBox="0 0 24 24">
       <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
       <path d="M0 0h24v24H0z" fill="none"></path>
     </svg>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css
index d093c86edf43..a26a6ea87cfb 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css
@@ -8,6 +8,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -24,6 +25,7 @@
   font-size: 14px;
   flex-grow: 1;
   flex-basis: 0;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example.css
index eec65dd76c5c..b1bf6ae2644f 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example.css
@@ -9,6 +9,7 @@
   min-height: 60px;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -23,6 +24,7 @@
   text-align: center;
   font-size: 14px;
   min-width: 115px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-overview/cdk-drag-drop-overview-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-overview/cdk-drag-drop-overview-example.css
index 1e725e0ee13c..65c3220c3cfe 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-overview/cdk-drag-drop-overview-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-overview/cdk-drag-drop-overview-example.css
@@ -13,6 +13,7 @@
   position: relative;
   z-index: 1;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  font-family: sans-serif;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.css
index b54b269f0564..30d7e2d45c1f 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.css
@@ -10,6 +10,7 @@
   background: #fff;
   border-radius: 4px;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  font-family: sans-serif;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.css
index 1288a030736c..f429431be37b 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.css
@@ -12,6 +12,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -26,6 +27,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.css
index 46153339de4c..2adc2bddddbd 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.css
@@ -7,6 +7,7 @@
   display: block;
   width: 400px;
   max-width: 100%;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -21,6 +22,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css
index 56f580a8e8d6..7d15c22d18d9 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css
@@ -7,6 +7,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -21,6 +22,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css
index d1c7b844f677..d11a28880ac1 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css
@@ -1,5 +1,6 @@
 table {
   width: 100%;
+  font-family: sans-serif;
 }
 
 .example-drag-cursor {