fixed SVG icons in tab headers - fixes #5926

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

@@ -0,0 +1,9 @@
+i.icon(
+    class='fa-fw {{icon}}',
+    [style.color]='color',
+    *ngIf='!isHTML'
+)
+.icon(
+    [fastHtmlBind]='icon',
+    *ngIf='isHTML'
+)

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

@@ -0,0 +1,10 @@
+:host {
+    display: flex;
+    align-items: center;
+    max-width: 1.25rem;
+}
+
+::ng-deep img {
+    max-width: 100%;
+    max-height: 100%;
+}

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

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { Component, Input } from '@angular/core'
+import { BaseComponent } from './base.component'
+
+/** @hidden */
+@Component({
+    selector: 'profile-icon',
+    template: require('./profileIcon.component.pug'),
+    styles: [require('./profileIcon.component.scss')],
+})
+export class ProfileIconComponent extends BaseComponent {
+    @Input() icon?: string
+    @Input() color?: string
+
+    get isHTML (): boolean {
+        return this.icon?.startsWith('<') ?? false
+    }
+}

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

@@ -17,15 +17,9 @@
                 (click)='selectOption(option)',
                 [class.active]='selectedIndex == i'
             )
-                i.icon(
+                profile-icon(
-                    class='fa-fw {{option.icon}}',
+                    [icon]='option.icon',
-                    style='color: {{option.color}}',
+                    [color]='option.color'
-                    *ngIf='!iconIsSVG(option.icon)'
-                )
-                .icon(
-                    [fastHtmlBind]='option.icon',
-                    style='color: {{option.color}}',
-                    *ngIf='iconIsSVG(option.icon)'
                 )
                 .title.mr-2 {{getOptionText(option)}}
                 .description.no-wrap.text-muted {{option.description}}

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

@@ -84,8 +84,4 @@ export class SelectorModalComponent<T> {
     close (): void {
         this.modalInstance.dismiss()
     }
-
-    iconIsSVG (icon?: string): boolean {
-        return icon?.startsWith('<') ?? false
-    }
 }

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

@@ -5,10 +5,10 @@
 .index(*ngIf='!config.store.terminal.hideTabIndex && hostApp.platform === Platform.macOS', cdkDragHandle) {{index + 1}}
 .index(*ngIf='!config.store.terminal.hideTabIndex && hostApp.platform !== Platform.macOS') {{index + 1}}
 
-.icon(
+profile-icon(
     *ngIf='config.store.terminal.showTabProfileIcon && tab.icon',
-    [ngClass]='tab.icon',
+    [icon]='tab.icon',
-    [style.color]='tab.color'
+    [color]='tab.color'
 )
 
 .name(

tabby-core/src/components/tabHeader.component.scss

@@ -26,8 +26,7 @@ $tabs-height: 38px;
       height: $tabs-height;
     }
 
-    .index,
+    .index {
-    .icon {
         flex: none;
         font-weight: bold;
         -webkit-app-region: no-drag;
@@ -41,7 +40,7 @@ $tabs-height: 38px;
         margin-top: 1px;
     }
 
-    .icon {
+    profile-icon {
         font-size: 13px;
         margin: 1px 4px 0 0;
     }

tabby-core/src/index.ts

@@ -29,6 +29,7 @@ import { SplitTabPaneLabelComponent } from './components/splitTabPaneLabel.compo
 import { UnlockVaultModalComponent } from './components/unlockVaultModal.component'
 import { WelcomeTabComponent } from './components/welcomeTab.component'
 import { TransfersMenuComponent } from './components/transfersMenu.component'
+import { ProfileIconComponent } from './components/profileIcon.component'
 
 import { AutofocusDirective } from './directives/autofocus.directive'
 import { AlwaysVisibleTypeaheadDirective } from './directives/alwaysVisibleTypeahead.directive'
@@ -128,6 +129,7 @@ const PROVIDERS = [
         TransfersMenuComponent,
         DropZoneDirective,
         CdkAutoDropGroup,
+        ProfileIconComponent,
     ],
     entryComponents: [
         PromptModalComponent,
@@ -150,6 +152,7 @@ const PROVIDERS = [
         DragDropModule,
         TranslateModule,
         CdkAutoDropGroup,
+        ProfileIconComponent,
     ],
 })
 export default class AppModule { // eslint-disable-line @typescript-eslint/no-extraneous-class

tabby-settings/src/components/editProfileModal.component.pug

@@ -40,7 +40,10 @@
                     )
                     .input-group-append
                         .input-group-text
-                            i([class]='"fa-fw " + profile.icon')
+                            profile-icon(
+                                [icon]='profile.icon',
+                                [color]='profile.color'
+                            )
 
                 ng-template(#rt,let-r='result',let-t='term')
                     i([class]='"fa-fw " + r')

tabby-settings/src/components/profilesSettingsTab.component.pug

@@ -58,14 +58,9 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
                                     [class.list-group-item-action]='!profile.isBuiltin',
                                     (click)='profile.isBuiltin ? null : editProfile(profile)'
                                 )
-                                    i.icon(
+                                    profile-icon(
-                                        class='fa-fw {{profile.icon}}',
+                                        [icon]='profile.icon',
-                                        [style.color]='profile.color',
+                                        [color]='profile.color'
-                                        *ngIf='!iconIsSVG(profile.icon)'
-                                    )
-                                    .icon(
-                                        [fastHtmlBind]='profile.icon',
-                                        *ngIf='iconIsSVG(profile.icon)'
                                     )
 
                                     .no-wrap {{profile.name}}

tabby-settings/src/components/profilesSettingsTab.component.scss

@@ -1,8 +1,8 @@
-.icon {
+profile-icon {
     width: 1.25rem;
     margin-right: 0.25rem;
 }
 
-.icon + * {
+profile-icon + * {
     margin-left: 10px;
 }

tabby-settings/src/components/profilesSettingsTab.component.ts

@@ -225,10 +225,6 @@ export class ProfilesSettingsTabComponent extends BaseComponent {
         return !this.filter || (profile.name + '$' + (this.getDescription(profile) ?? '')).toLowerCase().includes(this.filter.toLowerCase())
     }
 
-    iconIsSVG (icon?: string): boolean {
-        return icon?.startsWith('<') ?? false
-    }
-
     getDescription (profile: PartialProfile<Profile>): string|null {
         return this.profilesService.getDescription(profile)
     }