From 20eb9efaa664254208a076bfdaac04b399cf1300 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 20 Jun 2026 13:48:42 +0200
Subject: [PATCH] Task/add icon to indicate external links in page tabs
 component (#7081)

* Add icon to indicate external links

* Update changelog
---
 CHANGELOG.md                                       | 1 +
 libs/ui/src/lib/page-tabs/page-tabs.component.html | 4 ++++
 libs/ui/src/lib/page-tabs/page-tabs.component.scss | 9 +++++++++
 libs/ui/src/lib/page-tabs/page-tabs.component.ts   | 4 ++++
 4 files changed, 18 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1d66e91c..361499e58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added an icon to indicate external links in the page tabs component
 - Added the Korean (`ko`) language to the footer
 
 ### Changed
diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.html b/libs/ui/src/lib/page-tabs/page-tabs.component.html
index 051005790..2898bcc79 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.html
+++ b/libs/ui/src/lib/page-tabs/page-tabs.component.html
@@ -20,6 +20,10 @@
           <ng-container
             *ngTemplateOutlet="tabContent; context: { $implicit: tab }"
           />
+          <ion-icon
+            class="d-none d-sm-block external-link-icon ml-auto text-muted"
+            name="open-outline"
+          />
         </button>
       } @else {
         <a
diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.scss b/libs/ui/src/lib/page-tabs/page-tabs.component.scss
index 3415a7cb0..ffb3ff33c 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.scss
+++ b/libs/ui/src/lib/page-tabs/page-tabs.component.scss
@@ -6,6 +6,10 @@
   height: 100%;
   width: 100%;
 
+  .external-link-icon {
+    font-size: 0.75rem;
+  }
+
   @include mat.tabs-overrides(
     (
       active-indicator-height: 0,
@@ -65,6 +69,11 @@
               background-color: rgba(var(--palette-foreground-base), 0.05);
               font-weight: 500;
             }
+
+            .mdc-tab__content,
+            .mdc-tab__text-label {
+              width: 100%;
+            }
           }
         }
       }
diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.ts b/libs/ui/src/lib/page-tabs/page-tabs.component.ts
index a6ab9cb18..92f0f60d7 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.ts
+++ b/libs/ui/src/lib/page-tabs/page-tabs.component.ts
@@ -8,6 +8,8 @@ import {
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { openOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 
 import { TabConfiguration } from './interfaces/interfaces';
@@ -27,5 +29,7 @@ export class GfPageTabsComponent {
 
   public constructor() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
+    addIcons({ openOutline });
   }
 }