wsl: Get the distro icon from the package family name

All the WSL distributions that was installed from the Microsoft Store
have a package family name that can be used to get the icon of the
distribution.

Signed-off-by: Matheus Castello <matheus@castello.eng.br>

tabby-core/src/components/profileIcon.component.pug

@@ -1,7 +1,11 @@
+.icon(
+    [fastHtmlBind]='pngPath',
+    *ngIf='!isHTML && isPNG'
+)
 i.icon(
     class='fa-fw {{icon}}',
     [style.color]='color',
-    *ngIf='!isHTML'
+    *ngIf='!isHTML && !isPNG'
 )
 .icon(
     [fastHtmlBind]='icon',

tabby-core/src/components/profileIcon.component.ts

@@ -12,7 +12,15 @@ export class ProfileIconComponent extends BaseComponent {
     @Input() icon?: string
     @Input() color?: string
 
+    get pngPath (): string {
+        return `<img src="${this.icon?.trim()}" width="16" height="16" />`
+    }
+
     get isHTML (): boolean {
         return this.icon?.startsWith('<') ?? false
     }
+
+    get isPNG (): boolean {
+        return this.icon?.endsWith('.png') ?? false
+    }
 }