diff --git a/src/sql/platform/accounts/browser/accountManagement.contribution.ts b/src/sql/platform/accounts/browser/accountManagement.contribution.ts
index d1c63657a2..6e11b37ea6 100644
--- a/src/sql/platform/accounts/browser/accountManagement.contribution.ts
+++ b/src/sql/platform/accounts/browser/accountManagement.contribution.ts
@@ -6,9 +6,8 @@
 import { IExtensionPointUser, ExtensionsRegistry } from 'vs/workbench/services/extensions/common/extensionsRegistry';
 import { IJSONSchema } from 'vs/base/common/jsonSchema';
 import { localize } from 'vs/nls';
-import { join } from 'vs/base/common/path';
-import { createCSSRule } from 'vs/base/browser/dom';
-import { URI } from 'vs/base/common/uri';
+import { createCSSRule, asCSSUrl } from 'vs/base/browser/dom';
+import * as resources from 'vs/base/common/resources';
 
 export interface IAccountContrib {
 	id: string;
@@ -64,13 +63,13 @@ ExtensionsRegistry.registerExtensionPoint<IAccountContrib | IAccountContrib[]>({
 		if (icon) {
 			const iconClass = id;
 			if (typeof icon === 'string') {
-				const path = join(extension.description.extensionLocation.fsPath, icon);
-				createCSSRule(`.icon.${iconClass}`, `background-image: url("${URI.file(path).toString()}")`);
+				const path = resources.joinPath(extension.description.extensionLocation, icon);
+				createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(path)}`);
 			} else {
-				const light = join(extension.description.extensionLocation.fsPath, icon.light);
-				const dark = join(extension.description.extensionLocation.fsPath, icon.dark);
-				createCSSRule(`.icon.${iconClass}`, `background-image: url("${URI.file(light).toString()}")`);
-				createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: url("${URI.file(dark).toString()}")`);
+				const light = resources.joinPath(extension.description.extensionLocation, icon.light);
+				const dark = resources.joinPath(extension.description.extensionLocation, icon.dark);
+				createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(light)}`);
+				createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(dark)}`);
 			}
 		}
 	}
diff --git a/src/sql/platform/tasks/browser/tasksRegistry.ts b/src/sql/platform/tasks/browser/tasksRegistry.ts
index 72a66dbbf1..6e6659aa1e 100644
--- a/src/sql/platform/tasks/browser/tasksRegistry.ts
+++ b/src/sql/platform/tasks/browser/tasksRegistry.ts
@@ -10,7 +10,7 @@ import * as types from 'vs/base/common/types';
 import { Event, Emitter } from 'vs/base/common/event';
 import { URI } from 'vs/base/common/uri';
 import { CommandsRegistry } from 'vs/platform/commands/common/commands';
-import { createCSSRule } from 'vs/base/browser/dom';
+import { createCSSRule, asCSSUrl } from 'vs/base/browser/dom';
 import { ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import { IdGenerator } from 'vs/base/common/idGenerator';
@@ -58,8 +58,8 @@ export const TaskRegistry: ITaskRegistry = new class implements ITaskRegistry {
 			iconClass = this.taskIdToIconClassNameMap.get(item.id);
 		} else if (item.iconLocation) {
 			iconClass = ids.nextId();
-			createCSSRule(`.icon.${iconClass}`, `background-image: url("${(item.iconLocation.light || item.iconLocation.dark).toString()}")`);
-			createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: url("${(item.iconLocation.dark).toString()}")`);
+			createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.light || item.iconLocation.dark)}`);
+			createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.dark)}`);
 			this.taskIdToIconClassNameMap.set(item.id, iconClass);
 		}
 		return iconClass;
diff --git a/src/sql/workbench/browser/modelComponents/componentWithIconBase.ts b/src/sql/workbench/browser/modelComponents/componentWithIconBase.ts
index 64d58b64f0..4ca478dd80 100644
--- a/src/sql/workbench/browser/modelComponents/componentWithIconBase.ts
+++ b/src/sql/workbench/browser/modelComponents/componentWithIconBase.ts
@@ -9,7 +9,7 @@ import { IComponentDescriptor } from 'sql/workbench/browser/modelComponents/inte
 import * as azdata from 'azdata';
 import { URI } from 'vs/base/common/uri';
 import { IdGenerator } from 'vs/base/common/idGenerator';
-import { createCSSRule, removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
+import { createCSSRule, removeCSSRulesContainingSelector, asCSSUrl } from 'vs/base/browser/dom';
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 
 
@@ -45,35 +45,34 @@ export abstract class ComponentWithIconBase extends ComponentBase {
 			}
 
 			removeCSSRulesContainingSelector(this._iconClass);
-			const icon = this.getLightIconPath(this.iconPath);
-			const iconDark = this.getDarkIconPath(this.iconPath) || icon;
-			createCSSRule(`.icon.${this._iconClass}`, `background-image: url("${icon}")`);
-			createCSSRule(`.vs-dark .icon.${this._iconClass}, .hc-black .icon.${this._iconClass}`, `background-image: url("${iconDark}")`);
+			const icon = this.getLightIconUri(this.iconPath);
+			const iconDark = this.getDarkIconUri(this.iconPath) || icon;
+			createCSSRule(`.icon.${this._iconClass}`, `background-image: ${asCSSUrl(icon)}`);
+			createCSSRule(`.vs-dark .icon.${this._iconClass}, .hc-black .icon.${this._iconClass}`, `background-image: ${asCSSUrl(iconDark)}`);
 			this._changeRef.detectChanges();
 		}
 	}
 
-	private getLightIconPath(iconPath: IUserFriendlyIcon): string {
+	private getLightIconUri(iconPath: IUserFriendlyIcon): URI {
 		if (iconPath && iconPath['light']) {
-			return this.getIconPath(iconPath['light']);
+			return this.getIconUri(iconPath['light']);
 		} else {
-			return this.getIconPath(<string | URI>iconPath);
+			return this.getIconUri(<string | URI>iconPath);
 		}
 	}
 
-	private getDarkIconPath(iconPath: IUserFriendlyIcon): string {
+	private getDarkIconUri(iconPath: IUserFriendlyIcon): URI {
 		if (iconPath && iconPath['dark']) {
-			return this.getIconPath(iconPath['dark']);
+			return this.getIconUri(iconPath['dark']);
 		}
 		return null;
 	}
 
-	private getIconPath(iconPath: string | URI): string {
+	private getIconUri(iconPath: string | URI): URI {
 		if (typeof iconPath === 'string') {
-			return URI.file(iconPath).toString();
+			return URI.file(iconPath);
 		} else {
-			let uri = URI.revive(iconPath);
-			return uri.toString();
+			return URI.revive(iconPath);
 		}
 	}
 
diff --git a/src/sql/workbench/parts/dashboard/browser/containers/dashboardNavSection.contribution.ts b/src/sql/workbench/parts/dashboard/browser/containers/dashboardNavSection.contribution.ts
index 832e932030..75f746dcd9 100644
--- a/src/sql/workbench/parts/dashboard/browser/containers/dashboardNavSection.contribution.ts
+++ b/src/sql/workbench/parts/dashboard/browser/containers/dashboardNavSection.contribution.ts
@@ -7,9 +7,10 @@ import { IExtensionPointUser } from 'vs/workbench/services/extensions/common/ext
 import { IJSONSchema } from 'vs/base/common/jsonSchema';
 import * as nls from 'vs/nls';
 import { join } from 'vs/base/common/path';
-import { createCSSRule } from 'vs/base/browser/dom';
+import { createCSSRule, asCSSUrl } from 'vs/base/browser/dom';
 import { URI } from 'vs/base/common/uri';
 import { IdGenerator } from 'vs/base/common/idGenerator';
+import * as resources from 'vs/base/common/resources';
 
 import { NavSectionConfig, IUserFriendlyIcon } from 'sql/workbench/parts/dashboard/browser/core/dashboardWidget';
 import { registerContainerType, generateNavSectionContainerTypeSchemaProperties } from 'sql/platform/dashboard/common/dashboardContainerRegistry';
@@ -84,13 +85,13 @@ function createCSSRuleForIcon(icon: IUserFriendlyIcon, extension: IExtensionPoin
 	if (icon) {
 		iconClass = ids.nextId();
 		if (typeof icon === 'string') {
-			const path = join(extension.description.extensionLocation.fsPath, icon);
-			createCSSRule(`.icon.${iconClass}`, `background-image: url("${URI.file(path).toString()}")`);
+			const path = resources.joinPath(extension.description.extensionLocation, icon);
+			createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(path)}`);
 		} else {
-			const light = join(extension.description.extensionLocation.fsPath, icon.light);
-			const dark = join(extension.description.extensionLocation.fsPath, icon.dark);
-			createCSSRule(`.icon.${iconClass}`, `background-image: url("${URI.file(light).toString()}")`);
-			createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: url("${URI.file(dark).toString()}")`);
+			const light = resources.joinPath(extension.description.extensionLocation, icon.light);
+			const dark = resources.joinPath(extension.description.extensionLocation, icon.dark);
+			createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(light)}`);
+			createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(dark)}`);
 		}
 	}
 	return iconClass;