fix(blog-social-icons): setting absolute path for SSR custom mat icons

Author: esteecodes

src/app/components/header.component.ts

@@ -67,7 +67,7 @@ import { FollowDialogComponent } from "../partials/follow-dialog.component";
       <mat-toolbar-row class="second">
         <div class="social">
           <!-- error with icons path in blog-social-icons component -->
-          <!-- <app-blog-social-icons [blogSocialLinks]="blogSocialLinks"></app-blog-social-icons> -->
+          <app-blog-social-icons [blogSocialLinks]="blogSocialLinks"></app-blog-social-icons>
         </div>
         <div class="follow">
           <button mat-raised-button (click)="openFollowDialog()">Follow</button>

src/app/pages/post/[postSlug].page.ts

@@ -27,6 +27,7 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatButtonModule } from "@angular/material/button";
 import { MatToolbarModule } from "@angular/material/toolbar";
 import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-embed.directive";
+import { BlogSocialIconsComponent } from "src/app/partials/blog-social-icons.component";
 
 @Component({
 	selector: "app-post-details",
@@ -37,6 +38,7 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb
 		DatePipe,
 		KeyValuePipe,
 		SanitizerHtmlPipe,
+    BlogSocialIconsComponent,
 		MatToolbarModule,
 		MatButtonModule,
 		MatIconModule,
@@ -71,7 +73,7 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb
 						</mat-nav-list>
 						<mat-nav-list class="social">
 							<!-- issues with icons path after adding public folder -->
-							<!-- <app-blog-social-icons [blogSocialLinks]="blogSocialLinks"></app-blog-social-icons> -->
+							<app-blog-social-icons [blogSocialLinks]="blogSocialLinks"></app-blog-social-icons>
 						</mat-nav-list>
 					</div>
 				</mat-sidenav>
@@ -107,7 +109,6 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb
 								</div>
 							</div>
 						</div>
-						<!-- yt video directive not set since there were errors with bath also -->
 						<div
 							class="content"
 							[innerHTML]="post.content.html | sanitizerHtml"

src/app/partials/blog-social-icons.component.ts

@@ -23,7 +23,7 @@ import { MatIcon, MatIconRegistry } from "@angular/material/icon";
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: center;
-    gap: 0.3rem;
+    gap: 0.5rem;
 
     a {
       mat-icon {
@@ -42,32 +42,33 @@ export class BlogSocialIconsComponent {
 		private iconRegistry: MatIconRegistry,
 		private sanitizer: DomSanitizer
 	) {
+    const deployedUrl = "https://analogmaterial.anguhashblog.com/";
 		iconRegistry.addSvgIcon("twitter",
-			this.sanitizer.bypassSecurityTrustResourceUrl("/icons/twitter.svg")
+			this.sanitizer.bypassSecurityTrustResourceUrl(`${deployedUrl}icons/twitter.svg`)
 		);
 		this.iconRegistry.addSvgIcon("instagram",
-			this.sanitizer.bypassSecurityTrustResourceUrl("/icons/instagram.svg")
+			this.sanitizer.bypassSecurityTrustResourceUrl(`${deployedUrl}icons/instagram.svg`)
 		);
 		this.iconRegistry.addSvgIcon("github",
-			this.sanitizer.bypassSecurityTrustResourceUrl("/icons/github.svg")
+			this.sanitizer.bypassSecurityTrustResourceUrl(`${deployedUrl}icons/github.svg`)
 		);
 		this.iconRegistry.addSvgIcon("website",
-			this.sanitizer.bypassSecurityTrustResourceUrl("/icons/website.svg")
+			this.sanitizer.bypassSecurityTrustResourceUrl(`${deployedUrl}icons/website.svg`)
 		);
 		this.iconRegistry.addSvgIcon("hashnode",
-			this.sanitizer.bypassSecurityTrustResourceUrl("/icons/hashnode.svg")
+			this.sanitizer.bypassSecurityTrustResourceUrl(`${deployedUrl}icons/hashnode.svg`)
 		);
 		this.iconRegistry.addSvgIcon("youtube",
-			this.sanitizer.bypassSecurityTrustResourceUrl("/icons/youtube.svg")
+			this.sanitizer.bypassSecurityTrustResourceUrl(`${deployedUrl}icons/youtube.svg`)
 		);
 		this.iconRegistry.addSvgIcon("dailydev",
-			this.sanitizer.bypassSecurityTrustResourceUrl("/icons/dailydev.svg")
+			this.sanitizer.bypassSecurityTrustResourceUrl(`${deployedUrl}icons/dailydev.svg`)
 		);
 		this.iconRegistry.addSvgIcon("linkedin",
-			this.sanitizer.bypassSecurityTrustResourceUrl("/icons/linkedin.svg")
+			this.sanitizer.bypassSecurityTrustResourceUrl(`${deployedUrl}icons/linkedin.svg`)
 		);
 		this.iconRegistry.addSvgIcon("mastodon",
-			this.sanitizer.bypassSecurityTrustResourceUrl("/icons/mastodon.svg")
+			this.sanitizer.bypassSecurityTrustResourceUrl(`${deployedUrl}icons/mastodon.svg`)
 		);
 	}
 }