Update list filtering to use icon font

cc @joaomoreno

src/vs/base/browser/ui/list/list.css

@@ -113,55 +113,28 @@
 }
 
 .monaco-list-type-filter > .controls > * {
+	border: none;
 	box-sizing: border-box;
-	width: 16px;
-	height: 16px;
-	margin: 0 0 0 2px;
-	flex-shrink: 0;
-}
-
-.monaco-list-type-filter > .controls > .filter {
 	-webkit-appearance: none;
 	-moz-appearance: none;
+	background: none;
 	width: 16px;
 	height: 16px;
-	background: url("media/no-filter-light.svg");
-	background-position: 50% 50%;
-	cursor: pointer;
-}
-
-.monaco-list-type-filter > .controls > .filter:checked {
-	background-image: url("media/filter-light.svg");
-}
-
-.vs-dark .monaco-list-type-filter > .controls > .filter {
-	background-image: url("media/no-filter-dark.svg");
-}
-
-.vs-dark .monaco-list-type-filter > .controls > .filter:checked {
-	background-image: url("media/filter-dark.svg");
-}
-
-.hc-black .monaco-list-type-filter > .controls > .filter {
-	background-image: url("media/no-filter-hc.svg");
-}
-
-.hc-black .monaco-list-type-filter > .controls > .filter:checked {
-	background-image: url("media/filter-hc.svg");
-}
-
-.monaco-list-type-filter > .controls > .clear {
-	border: none;
-	background: url("media/close-light.svg");
+	flex-shrink: 0;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	cursor: pointer;
 }
 
-.vs-dark .monaco-list-type-filter > .controls > .clear {
-	background-image: url("media/close-dark.svg");
+.monaco-list-type-filter > .controls > .filter:checked::before {
+	content: "\eb83" !important; /* codicon-list-filter */
 }
 
-.hc-black .monaco-list-type-filter > .controls > .clear {
-	background-image: url("media/close-hc.svg");
+.monaco-list-type-filter > .controls > .filter {
+	margin-left: 4px;
 }
 
 .monaco-list-type-filter-message {

src/vs/base/browser/ui/list/media/close-dark.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 8.70714L11.6465 12.3536L12.3536 11.6465L8.70711 8.00004L12.3536 4.35359L11.6465 3.64648L8.00001 7.29293L4.35356 3.64648L3.64645 4.35359L7.2929 8.00004L3.64645 11.6465L4.35356 12.3536L8.00001 8.70714Z" fill="#C5C5C5"/>
-</svg>

src/vs/base/browser/ui/list/media/close-hc.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 8.70714L11.6465 12.3536L12.3536 11.6465L8.70711 8.00004L12.3536 4.35359L11.6465 3.64648L8.00001 7.29293L4.35356 3.64648L3.64645 4.35359L7.2929 8.00004L3.64645 11.6465L4.35356 12.3536L8.00001 8.70714Z" fill="#C5C5C5"/>
-</svg>

src/vs/base/browser/ui/list/media/close-light.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 8.70714L11.6465 12.3536L12.3536 11.6465L8.70711 8.00004L12.3536 4.35359L11.6465 3.64648L8.00001 7.29293L4.35356 3.64648L3.64645 4.35359L7.2929 8.00004L3.64645 11.6465L4.35356 12.3536L8.00001 8.70714Z" fill="#424242"/>
-</svg>

src/vs/base/browser/ui/list/media/filter-dark.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 12V11H10V12H6ZM4 7H12V8H4V7ZM14 3V4H2V3H14Z" fill="#C5C5C5"/>
-</svg>

src/vs/base/browser/ui/list/media/filter-hc.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 12V11H10V12H6ZM4 7H12V8H4V7ZM14 3V4H2V3H14Z" fill="white"/>
-</svg>

src/vs/base/browser/ui/list/media/filter-light.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 12V11H10V12H6ZM4 7H12V8H4V7ZM14 3V4H2V3H14Z" fill="#424242"/>
-</svg>

src/vs/base/browser/ui/list/media/no-filter-dark.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 12L1 11H10V12H1ZM1 7H15V8H1L1 7ZM12 3V4H1L1 3H12Z" fill="#C5C5C5"/>
-</svg>

src/vs/base/browser/ui/list/media/no-filter-hc.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 12L1 11H10V12H1ZM1 7H15V8H1L1 7ZM12 3V4H1L1 3H12Z" fill="#C5C5C5"/>
-</svg>

src/vs/base/browser/ui/list/media/no-filter-light.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 12L1 11H10V12H1ZM1 7H15V8H1L1 7ZM12 3V4H1L1 3H12Z" fill="#424242"/>
-</svg>

src/vs/base/browser/ui/tree/abstractTree.ts

@@ -634,14 +634,14 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
 		const controls = append(this.domNode, $('.controls'));
 
 		this._filterOnType = !!tree.options.filterOnType;
-		this.filterOnTypeDomNode = append(controls, $<HTMLInputElement>('input.filter'));
+		this.filterOnTypeDomNode = append(controls, $<HTMLInputElement>('input.filter.codicon.codicon-list-selection'));
 		this.filterOnTypeDomNode.type = 'checkbox';
 		this.filterOnTypeDomNode.checked = this._filterOnType;
 		this.filterOnTypeDomNode.tabIndex = -1;
 		this.updateFilterOnTypeTitle();
 		domEvent(this.filterOnTypeDomNode, 'input')(this.onDidChangeFilterOnType, this, this.disposables);
 
-		this.clearDomNode = append(controls, $<HTMLInputElement>('button.clear'));
+		this.clearDomNode = append(controls, $<HTMLInputElement>('button.clear.codicon.codicon-close'));
 		this.clearDomNode.tabIndex = -1;
 		this.clearDomNode.title = localize('clear', "Clear");