fix the icon sizing issue (#13522)

src/sql/base/browser/dom.ts

@@ -3,7 +3,6 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { endsWith } from 'vs/base/common/strings';
 import * as types from 'vs/base/common/types';
 
 export function isHidden(element: HTMLElement): boolean {
@@ -22,21 +21,22 @@ export function convertSize(size: number | string | undefined, defaultValue?: st
 		return defaultValue;
 	}
 	let convertedSize: string = size ? size.toString() : defaultValue;
-	if (!endsWith(convertedSize.toLowerCase(), 'px') && !endsWith(convertedSize.toLowerCase(), '%')) {
+	convertedSize = convertedSize.toLowerCase();
+	if (!convertedSize.endsWith('px') && !convertedSize.endsWith('%')) {
 		convertedSize = convertedSize + 'px';
 	}
 	return convertedSize;
 }
 
 /**
- * Converts a size value into its number representation. Supports px, em and unspecified units. 
+ * Converts a size value into its number representation. Supports px, em and unspecified units.
  * @param size The size value to convert
  */
 export function convertSizeToNumber(size: number | string | undefined): number {
 	if (size && typeof (size) === 'string') {
-		if (endsWith(size.toLowerCase(), 'px')) {
+		if (size.toLowerCase().endsWith('px')) {
 			return +size.replace('px', '');
-		} else if (endsWith(size.toLowerCase(), 'em')) {
+		} else if (size.toLowerCase().endsWith('em')) {
 			return +size.replace('em', '') * 11;
 		}
 	} else if (!size) {

src/sql/workbench/browser/modelComponents/button.component.ts

@@ -187,6 +187,14 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 		}
 	}
 
+	protected get defaultIconHeight(): number {
+		return 15;
+	}
+
+	protected get defaultIconWidth(): number {
+		return 15;
+	}
+
 	// CSS-bound properties
 
 	private get label(): string {

src/sql/workbench/browser/modelComponents/componentWithIconBase.ts

@@ -42,12 +42,20 @@ export abstract class ComponentWithIconBase<T extends azdata.ComponentWithIconPr
 		}
 	}
 
+	protected get defaultIconWidth(): number {
+		return 50;
+	}
+
+	protected get defaultIconHeight(): number {
+		return 50;
+	}
+
 	public getIconWidth(): string {
-		return convertSize(this.iconWidth, '40px');
+		return convertSize(this.iconWidth, `${this.defaultIconWidth}px`);
 	}
 
 	public getIconHeight(): string {
-		return convertSize(this.iconHeight, '40px');
+		return convertSize(this.iconHeight, `${this.defaultIconHeight}px`);
 	}
 
 	public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
@@ -55,11 +63,11 @@ export abstract class ComponentWithIconBase<T extends azdata.ComponentWithIconPr
 	}
 
 	public get iconHeight(): number | string {
-		return this.getPropertyOrDefault<number | string>((props) => props.iconHeight, '50px');
+		return this.getPropertyOrDefault<number | string>((props) => props.iconHeight, this.defaultIconHeight);
 	}
 
 	public get iconWidth(): number | string {
-		return this.getPropertyOrDefault<number | string>((props) => props.iconWidth, '50px');
+		return this.getPropertyOrDefault<number | string>((props) => props.iconWidth, this.defaultIconWidth);
 	}
 
 	public get title(): string {

src/sql/workbench/browser/modelComponents/media/toolbarLayout.css

@@ -51,17 +51,17 @@
 }
 
 .modelview-toolbar-container .modelview-toolbar-component modelview-button .monaco-text-button.icon {
-	padding-left: 19px;
-	background-size: 15px;
+	padding-left: 19px !important;
+	background-size: 15px !important;
 	margin-right: 0.3em;
 }
 
 /* Vertical button handling */
 .modelview-toolbar-container.toolbar-vertical  .modelview-toolbar-component modelview-button .monaco-text-button.icon {
-	padding: 20px 16px 20px 16px;
-	background-size: 20px;
+	padding: 20px 16px 20px 16px !important;
+	background-size: 20px !important;
 	margin-right: 0.3em;
-	background-position: 50% 50%;
+	background-position: 50% 50% !important;
 
 }