Fix icons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

src/components/Icon/SIcon.vue

@@ -25,17 +25,19 @@ export default class SIcon extends Vue {
    */
   @Prop({ type: String, required: true }) readonly name!: string
 
+  private visible = false
+
+  mounted (): void {
+    this.checkVisibility()
+  }
+
   get computedClass (): string {
     if (!this.name) {
       return ''
     }
     if (this.name.startsWith('el-icon')) {
       return this.name
     }
-    // Check loading state of icons font
-    if (!((document || {}) as any).fonts.check('1em soramitsu-icons')) {
-      return ''
-    }
     if (!(Object.values(Icons) as Array<string>).includes(this.name)) {
       console.warn(`'${this.name}' was not found`)
       return ''
@@ -48,7 +50,37 @@ export default class SIcon extends Vue {
     if (this.size) {
       styles.fontSize = !isNaN(+this.size) ? `${this.size}px` : this.size
     }
+    if (!this.visible) {
+      styles.color = 'transparent'
+    }
     return styles
   }
+
+  private async checkVisibility (): Promise<void> {
+    const cssClass = this.computedClass
+    if (!cssClass) {
+      this.visible = false
+      return
+    }
+    const fonts = (document as any).fonts
+    if (!fonts) {
+      // Ignore this check if the browser has no support
+      this.visible = true
+      return
+    }
+    if (cssClass.startsWith('el-icon')) {
+      if (fonts.check('1em element-icons')) {
+        this.visible = true
+        return
+      }
+    } else {
+      if (fonts.check('1em soramitsu-icons')) {
+        this.visible = true
+        return
+      }
+    }
+    await new Promise(resolve => setTimeout(resolve, 50))
+    await this.checkVisibility()
+  }
 }
 </script>