Fix errors due to icon to codicon rename in VSCode (#7837)

Found numerous errors where icons weren't rendering correctly.
- Anything that's an action must have CSS using "codicon" not "icon"
since VSCode sets the "codicon" class automatically.
This affected Agent view in particular, but also:
  - acounts view
  - new tab view in dashboard
 - many more
- Anything referencing the common-icons.css icons needed updating.
This hid help tooltip text in FormContainer UI for example.
- Finally I tried to convert all references from icon -> codicon,
even when the CSS was technically correct. This was done
for maintainability reasons - from now on always add codicon.

Fixes #7827

src/sql/base/browser/ui/breadcrumb/breadcrumb.component.ts

@@ -19,12 +19,12 @@ import { subscriptionToDisposable } from 'sql/base/browser/lifecycle';
 				<span style="display: flex; flex-flow: row; align-items: center; margin: 10px">
 					<ng-template ngFor let-item let-first="first" let-last="last" [ngForOf]="menuItems">
 						<span style="padding: 5px; display: flex; align-items: center">
-							<span *ngIf="item.icon" class="icon" style="display: inline-block; margin-right: 5px" [ngClass]="item.icon"></span>
+							<span *ngIf="item.icon" class="codicon" style="display: inline-block; margin-right: 5px" [ngClass]="item.icon"></span>
 							<span *ngIf="first">{{item.label}}</span>
 							<span *ngIf="last" style="">{{item.label}}</span>
 							<a class="router-link" *ngIf="!last && !first" (click)="route(item.routerLink)" >{{item.label}}</a>
 						</span>
-						<span *ngIf="!last" class="icon chevron-right"></span>
+						<span *ngIf="!last" class="codicon chevron-right"></span>
 					</ng-template>
 				</span>
 				`

src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css

@@ -4,23 +4,23 @@
  *--------------------------------------------------------------------------------------------*/
 
 
-.vs .chevron-right.icon {
+.vs .chevron-right.codicon {
 	background-image: url("chevron_right.svg");
 }
 
-.vs-dark .chevron-right.icon,
-.hc-black .chevron-right.icon {
+.vs-dark .chevron-right.codicon,
+.hc-black .chevron-right.codicon {
 	background-image: url("chevron_right_inverse.svg");
 }
 
-breadcrumb .icon {
+breadcrumb .codicon {
 	background-size: 16px;
 	background-position: 50% 50%;
 	background-repeat: no-repeat;
 	padding: 8px;
 }
 
-breadcrumb .chevron-right.icon {
+breadcrumb .chevron-right.codicon {
 	background-size: 16px;
 	background-position: 50% 50%;
 	background-repeat: no-repeat;
@@ -29,4 +29,4 @@ breadcrumb .chevron-right.icon {
 
 breadcrumb .router-link {
 	cursor: pointer;
-}
+}

src/sql/base/browser/ui/panel/media/panel.css

@@ -72,7 +72,7 @@ panel {
 	line-height: 45px;
 }
 
-.tabbedPanel .tabList .tab .tabLabel.icon {
+.tabbedPanel .tabList .tab .tabLabel.codicon {
 	background-repeat: no-repeat;
 	background-position: center center;
 	background-size: 20px;

src/sql/base/browser/ui/panel/tabHeader.component.ts

@@ -58,7 +58,7 @@ export class TabHeaderComponent extends Disposable implements AfterContentInit,
 
 		let tabLabelcontainer = this._tabLabelRef.nativeElement as HTMLElement;
 		if (this.showIcon && this.tab.iconClass) {
-			tabLabelcontainer.className = 'tabLabel icon';
+			tabLabelcontainer.className = 'tabLabel codicon';
 			tabLabelcontainer.classList.add(this.tab.iconClass);
 		} else {
 			tabLabelcontainer.className = 'tabLabel';

src/sql/base/browser/ui/taskbar/taskbar.ts

@@ -64,7 +64,7 @@ export class Taskbar {
 	 */
 	public static createTaskbarSpinner(): HTMLElement {
 		let spinnerContainer = document.createElement('div');
-		spinnerContainer.className = 'taskbar-progress icon in-progress ';
+		spinnerContainer.className = 'taskbar-progress codicon in-progress ';
 		spinnerContainer.style.visibility = 'hidden';
 		return spinnerContainer;
 	}