Trailing icon now a part of utills and can use external icon

apps/cookbook/src/app/examples/link-example/examples/link-examples.shared.scss

@@ -8,3 +8,7 @@
     margin-right: utils.size('s');
   }
 }
+
+.trailing-icon-example {
+  @include utils.trailing-icon('navigation');
+}

apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-link-example-trailing-icon',
+  template: `<a class="trailing-icon-example" target="_blank" href="https://github.com/kirbydesign/designsystem">Trailing icon</a>`,
+  style: `.trailing-icon-example
+{
+@include utils.trailing-icon("navigation")
+/* 
+@include utils.trailing-icon("https://cdn.jsdelivr.net/npm/open-iconic@1.1.1/svg/heart.svg")
+@include utils.trailing-icon()
+*/
+}`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  styleUrls: ['./link-examples.shared.scss'],
+})
+export class LinkExampleTrailingIconComponent {
+  template: string = config.template;
+  style: string = config.style;
+}

apps/cookbook/src/app/examples/link-example/link-example.module.ts

@@ -6,8 +6,13 @@ import { KirbyModule } from '@kirbydesign/designsystem';
 
 import { LinkExampleDefaultComponent } from './examples/default';
 import { LinkExampleNewTabComponent } from './examples/new-tab';
+import { LinkExampleTrailingIconComponent } from '~/app/examples/link-example/examples/trailing-icon';
 
-const COMPONENT_DECLARATIONS = [LinkExampleNewTabComponent, LinkExampleDefaultComponent];
+const COMPONENT_DECLARATIONS = [
+  LinkExampleNewTabComponent,
+  LinkExampleDefaultComponent,
+  LinkExampleTrailingIconComponent,
+];
 
 @NgModule({
   imports: [CommonModule, KirbyModule, RouterModule],

apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html

@@ -54,3 +54,20 @@ <h2>New tab</h2>
   In a non-web context, i.e. an app, any link will most likely launch the device's browser and
   effectively open a new tab outside the app context.
 </p>
+
+<h2>Custom trailing-icon</h2>
+<p>
+  If you want to use a custom icon at the end instead of the link then extend the mixin class
+  trailing-icon with @include and the icon name of your choosing:
+</p>
+<p>
+  <code>@include trailing-icon(iconName)</code>
+  the class will now look for the icon in assets. The example below is using
+  <code>"Navigation"</code>
+  as iconName. If you want to use an external svg, then you can input an URL instead of iconName.
+  View code to see examples.
+</p>
+
+<cookbook-example-viewer [html]="trailingTab.template" [css]="trailingTab.style">
+  <cookbook-link-example-trailing-icon #trailingTab></cookbook-link-example-trailing-icon>
+</cookbook-example-viewer>

libs/core/src/scss/_global-styles.scss

@@ -219,22 +219,6 @@ ion-loading.kirby-loading-overlay {
   }
 }
 
-/*
- * Class to add link-icon to the right of e.g. anchor tag.
- */
-.kirby-external-icon {
-  $icon-scaling-factor: 1.5em;
-
-  white-space: nowrap;
-  background-image: url('/assets/kirby/icons/svg/link.svg');
-  background-repeat: no-repeat;
-  background-position: right 50%;
-  background-size: $icon-scaling-factor;
-
-  // Place icon to the right of text, with icons own width + the actual spacing
-  padding-right: calc(#{$icon-scaling-factor} + #{utils.size('xxxs')});
-}
-
 /*
  * Modal V2.
  */
@@ -310,3 +294,10 @@ html.ios ion-modal.kirby-modal-v2 {
     display: flex;
   }
 }
+
+/* 
+  * Class to add link-icon to the right of e.g. anchor tag.
+  */
+.kirby-external-icon {
+  @include utils.trailing-icon;
+}

libs/core/src/scss/base/_functions.scss

@@ -205,3 +205,25 @@
     text-overflow: ellipsis;
   }
 }
+
+@mixin trailing-icon($svg: 'link') {
+  $icon-scaling-factor: 1.5em;
+
+  @if str-index($svg, 'http') {
+    // External icon
+    background-image: url('#{$svg}');
+  } @else {
+    // Icon from library
+    $icon-url: '/assets/kirby/icons/svg/#{$svg}.svg';
+
+    background-image: url('#{$icon-url}');
+  }
+
+  white-space: nowrap;
+  background-repeat: no-repeat;
+  background-position: right 50%;
+  background-size: $icon-scaling-factor;
+
+  // Place icon to the right of text, with icons own width + the actual spacing
+  padding-right: calc(#{$icon-scaling-factor} + #{size('xxxs')});
+}