feat: Adds guides icon

Author: Lissy93

src/app/components/misc/breadcrumbs.component.ts

@@ -149,6 +149,7 @@ export class BreadcrumbsComponent implements OnInit, OnChanges {
       'demo': 'desktop',
       'support': 'headphones',
       'self-hosted-support': 'server',
+      'guides': 'book',
     };
     const iconName = icons[path];
     if (!iconName) return;
@@ -180,7 +181,7 @@ export class BreadcrumbsComponent implements OnInit, OnChanges {
             .split('-')
             .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
             .join(' ');
-    
+
     path = decodeURIComponent(path);
     return labels[path] || formatLabel(path);
   }

src/app/components/misc/svg-icon.component.ts

@@ -1,7 +1,7 @@
-import { Component, Inject, Input, OnChanges, PLATFORM_ID } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Pipe, PipeTransform } from '@angular/core';
-import { isPlatformBrowser, NgStyle, CommonModule, NgOptimizedImage } from '@angular/common';
+import { NgStyle } from '@angular/common';
 
 // SafeHtml pipe to bypass Angular's sanitization
 @Pipe({ name: 'safeHtml', standalone: true })
@@ -16,7 +16,7 @@ export class SafeHtmlPipe implements PipeTransform {
 @Component({
   selector: 'dl-icon',
   standalone: true,
-  imports: [NgStyle, SafeHtmlPipe, CommonModule],
+  imports: [NgStyle, SafeHtmlPipe],
   template: `
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -27,7 +27,7 @@ export class SafeHtmlPipe implements PipeTransform {
       role="img"
       focusable="false"
     >
-      <g *ngIf="isBrowser" [innerHTML]="iconSvg | safeHtml"></g>
+      <g [innerHTML]="iconSvg | safeHtml"></g>
     </svg>
   `,
 })
@@ -41,16 +41,6 @@ export class DlIconComponent implements OnChanges {
 
   mergedStyles: any = {};
 
-  isBrowser: boolean = false;
-
-  constructor(
-    @Inject(PLATFORM_ID) private platformId: Object,
-  ) {}
-
-  ngOnInit(): void {
-    this.isBrowser = isPlatformBrowser(this.platformId);
-  }
-
   ngOnChanges(): void {
     // Merge the fill color (defaulting to currentColor) with user-provided styles
     this.mergedStyles = {
@@ -175,16 +165,17 @@ export class DlIconComponent implements OnChanges {
       svg: '<path class="fa-secondary" opacity=".4" d="M48 88l0 270.7c9.8-4.3 20.6-6.7 32-6.7l312 0c4.4 0 8-3.6 8-8l0-288c0-4.4-3.6-8-8-8L88 48C65.9 48 48 65.9 48 88zm94.3 32.8L160 112l8.8-17.7c2.9-5.9 11.4-5.9 14.3 0L192 112l17.7 8.8c5.9 2.9 5.9 11.4 0 14.3L192 144l-8.8 17.7c-2.9 5.9-11.4 5.9-14.3 0L160 144l-17.7-8.8c-5.9-2.9-5.9-11.4 0-14.3zm82.8 111.8L264 216l16.6-38.8c2.8-6.5 11.9-6.5 14.7 0L312 216l38.8 16.6c6.5 2.8 6.5 11.9 0 14.7L312 264l-16.6 38.8c-2.8 6.5-11.9 6.5-14.7 0L264 264l-38.8-16.6c-6.5-2.8-6.5-11.9 0-14.7z"/><path class="fa-primary" d="M0 88C0 39.4 39.4 0 88 0L392 0c30.9 0 56 25.1 56 56l0 288c0 22.3-13.1 41.6-32 50.6l0 69.4 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L80 512c-44.2 0-80-35.8-80-80c0-2.7 .1-5.4 .4-8L0 424 0 88zM80 400c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0 0-64L80 400zM48 358.7c9.8-4.3 20.6-6.7 32-6.7l312 0c4.4 0 8-3.6 8-8l0-288c0-4.4-3.6-8-8-8L88 48C65.9 48 48 65.9 48 88l0 270.7zM160 112l8.8-17.7c2.9-5.9 11.4-5.9 14.3 0L192 112l17.7 8.8c5.9 2.9 5.9 11.4 0 14.3L192 144l-8.8 17.7c-2.9 5.9-11.4 5.9-14.3 0L160 144l-17.7-8.8c-5.9-2.9-5.9-11.4 0-14.3L160 112zM264 216l16.6-38.8c2.8-6.5 11.9-6.5 14.7 0L312 216l38.8 16.6c6.5 2.8 6.5 11.9 0 14.7L312 264l-16.6 38.8c-2.8 6.5-11.9 6.5-14.7 0L264 264l-38.8-16.6c-6.5-2.8-6.5-11.9 0-14.7L264 216z"/>',
       viewbox: '0 0 448 512',
     },
+    guides: {
+      svg: '<path class="fa-secondary" opacity=".4" d="M160 64l0 32c23.3 0 45.2 6.2 64 17.1L224 64l352 0 0 288-64 0-128 0-99.6 0c22.4 16.5 40.6 38.5 52.4 64L576 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L224 0c-35.3 0-64 28.7-64 64z"/><path class="fa-primary" d="M64 224a96 96 0 1 1 192 0A96 96 0 1 1 64 224zM0 485.3C0 411.7 59.7 352 133.3 352l53.3 0C260.3 352 320 411.7 320 485.3c0 14.7-11.9 26.7-26.7 26.7L26.7 512C11.9 512 0 500.1 0 485.3zM416 288l64 0c17.7 0 32 14.3 32 32l0 32-128 0 0-32c0-17.7 14.3-32 32-32z"/>',
+      viewbox: '0 0 640 512',
+    },
     externalLinks: '<path class="fa-secondary" opacity=".4" d="M0 256c0-22.1 2.8-43.5 8.1-64l123.1 0c-1.9 18.4-2.9 37.4-3.1 57L20.4 280.6c-7.1 2.1-13.1 5.5-18.1 9.9C.8 279.2 0 267.7 0 256zm18.6-96C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160L18.6 160zm141.6 79.5c.4-16.3 1.5-32.2 3.1-47.5l185.3 0c2.2 20.4 3.3 41.8 3.3 64s-1.2 43.6-3.3 64l-66.8 0 12.6-42.8c10.7-36.4-23.1-70.3-59.6-59.6l-74.6 21.9zm7.5-79.5c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7l-176.6 0zm61 338.6c1-2.2 1.9-4.6 2.7-7.1L272.4 352l71.9 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512c-7.2 0-16.3-3.1-27.3-13.4zM321.4 8.4c78.3 20.7 142 77.5 171.9 151.6l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6zm0 495.1c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0c-30 74.1-93.6 130.9-171.9 151.6zM380.8 192l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64z"/><path class="fa-primary" d="M243.9 248.3L39 308.5c-13.9 4.1-15.6 23.2-2.6 29.7l57.3 28.7c1.3 .7 2.6 1.5 3.7 2.5l-88 88c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l88-88c1 1.1 1.9 2.3 2.5 3.7l28.7 57.3c6.5 13 25.6 11.3 29.7-2.6l60.2-204.8c3.6-12.1-7.7-23.4-19.9-19.9z"/>',
   };
 
   /**
    * The raw SVG path data (or <path> etc.) for the current icon.
    */
   get iconSvg(): string {
-    if (!isPlatformBrowser(this.platformId)) {
-      return '';
-    }
     const iconDef = this.icons[this.icon];
     if (!iconDef) {
       return '';