fix: icon no longer flickers on IE (#722)

vladitasev · web-flow · commit 964af6768f01 · 2019-08-09T15:23:02.000+03:00
diff --git a/packages/main/src/Icon.js b/packages/main/src/Icon.js
@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getIconData } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
+import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
 import { fetchResourceBundle, getResourceBundle } from "@ui5/webcomponents-base/dist/ResourceBundle.js";
 import IconTemplate from "./generated/templates/IconTemplate.lit.js";
 
@@ -111,11 +112,22 @@ class Icon extends UI5Element {
 	}
 
 	static async define(...params) {
+		this.createGlobalStyle();
 		await fetchResourceBundle("@ui5/webcomponents");
 
 		super.define(...params);
 	}
 
+	static createGlobalStyle() {
+		if (!window.ShadyDOM) {
+			return;
+		}
+		const styleElement = document.head.querySelector(`style[data-ui5-icon-global]`);
+		if (!styleElement) {
+			createStyleInHead(`ui5-icon:not([data-ui5-defined]) { display: none !important; }`, { "data-ui5-icon-global": "" });
+		}
+	}
+
 	_normalizeIconURI(iconURI) {
 		return this._hasIconPrefix(iconURI) ? iconURI : `sap-icon://${iconURI}`;
 	}
@@ -148,6 +160,13 @@ class Icon extends UI5Element {
 	get dir() {
 		return getRTL() ? "rtl" : "ltr";
 	}
+
+	onEnterDOM() {
+		if (!window.ShadyDOM) {
+			return;
+		}
+		this.setAttribute("data-ui5-defined", "");
+	}
 }
 
 Icon.define();
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Simple.html b/packages/main/test/sap/ui/webcomponents/main/pages/Simple.html
@@ -30,6 +30,7 @@
 <body>
 
     <ui5-button>ivan</ui5-button>
+    <ui5-icon src="sap-icon://add"></ui5-icon>
 
 </body>
 </html>
