diff --git a/src/lib/icon/icon.spec.ts b/src/lib/icon/icon.spec.ts
index e555849f8bd..6be7910636a 100644
--- a/src/lib/icon/icon.spec.ts
+++ b/src/lib/icon/icon.spec.ts
@@ -42,7 +42,9 @@ describe('MatIcon', () => {
   let fakePath: string;
 
   beforeEach(async(() => {
-    fakePath = '/fake-path';
+    // The $ prefix tells Karma not to try to process the
+    // request so that we don't get warnings in our logs.
+    fakePath = '/$fake-path';
 
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, MatIconModule],
@@ -630,7 +632,7 @@ describe('MatIcon', () => {
 
       // We use a regex to match here, rather than the exact value, because different browsers
       // return different quotes through `getAttribute`, while some even omit the quotes altogether.
-      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/fake-path#blur['"]?\)$/);
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/\$fake-path#blur['"]?\)$/);
 
       tick();
     }));
@@ -651,17 +653,18 @@ describe('MatIcon', () => {
       fixture.detectChanges();
       let circle = fixture.nativeElement.querySelector('mat-icon svg circle');
 
-      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/fake-path#blur['"]?\)$/);
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/\$fake-path#blur['"]?\)$/);
       tick();
       fixture.destroy();
 
-      fakePath = '/another-fake-path';
+      fakePath = '/$another-fake-path';
       fixture = TestBed.createComponent(IconFromSvgName);
       fixture.componentInstance.iconName = 'fido';
       fixture.detectChanges();
       circle = fixture.nativeElement.querySelector('mat-icon svg circle');
 
-      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/another-fake-path#blur['"]?\)$/);
+      expect(circle.getAttribute('filter'))
+          .toMatch(/^url\(['"]?\/\$another-fake-path#blur['"]?\)$/);
       tick();
     }));
 
@@ -683,13 +686,13 @@ describe('MatIcon', () => {
 
       // We use a regex to match here, rather than the exact value, because different browsers
       // return different quotes through `getAttribute`, while some even omit the quotes altogether.
-      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/fake-path#blur['"]?\)$/);
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/\$fake-path#blur['"]?\)$/);
       tick();
 
-      fakePath = '/different-path';
+      fakePath = '/$different-path';
       fixture.detectChanges();
 
-      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/different-path#blur['"]?\)$/);
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/\$different-path#blur['"]?\)$/);
     }));
 
   });
diff --git a/test/karma.conf.js b/test/karma.conf.js
index 816937b3f7c..a8f60e6670e 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -5,6 +5,7 @@ module.exports = config => {
   config.set({
     basePath: path.join(__dirname, '..'),
     frameworks: ['jasmine'],
+    middleware: ['fake-url'],
     plugins: [
       require('karma-jasmine'),
       require('karma-browserstack-launcher'),
@@ -12,6 +13,18 @@ module.exports = config => {
       require('karma-chrome-launcher'),
       require('karma-firefox-launcher'),
       require('karma-sourcemap-loader'),
+      {'middleware:fake-url': ['factory', function() {
+        // Middleware that avoids triggering 404s during tests that need to reference
+        // image paths. Assumes that the image path will start with `/$`.
+        return function(request, response, next) {
+          if (request.url.indexOf('/$') === 0) {
+            response.writeHead(200);
+            return response.end();
+          }
+
+          next();
+        }
+      }]}
     ],
     files: [
       {pattern: 'node_modules/core-js/client/core.min.js', included: true, watched: false},