From 5f7acfdd4df8055d25f39852d410b0512e97181d Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 17 Jan 2022 19:46:22 +0200
Subject: [PATCH] Add material icons on icon component

---
 utils/icons/icons.component.ts                | 36 +++++++++++++------
 .../section-scroll.component.ts               | 16 +++++----
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/utils/icons/icons.component.ts b/utils/icons/icons.component.ts
index 8340455d..8fd50643 100644
--- a/utils/icons/icons.component.ts
+++ b/utils/icons/icons.component.ts
@@ -15,10 +15,12 @@ import {IconsService} from "./icons.service";
   selector: 'icon',
   template: `
     <span *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
+    <span *ngIf="!svg && iconName" class="material-icons" [ngClass]="customClass + (type?(' ' + type):'')" [ngStyle]="style">{{iconName}}</span>
   `
 })
-export class IconsComponent implements OnInit{
+export class IconsComponent implements OnInit {
   public svg;
+  public iconName: string;
   public style;
   /**
    * True if this icon should have display flex (Optional, Default: false)
@@ -30,7 +32,7 @@ export class IconsComponent implements OnInit{
    * Add custom class(es)(Optional)
    * */
   @Input()
-  public customClass;
+  public customClass = '';
   /**
    * Color of svg (Optional)
    * */
@@ -42,27 +44,39 @@ export class IconsComponent implements OnInit{
   @Input()
   public stroke;
   /**
-   * Size of svg (Default: 1)
+   * Size of icon (Default: 1)
    * */
   @Input()
   public ratio = 1;
+  /**
+   * In case of Material icon only. Type of icon (Optional)
+   * */
+  @Input()
+  public type: "outlined" | "round" | "sharp" | "two-tone" | null = null;
   /**
    * Name of icon in registry (Required)
    * */
   @Input()
   set name(iconName: string) {
+    this.iconName = iconName;
     this.svg = this.iconsService.getIcon(iconName);
   }
   
-  constructor(private iconsService: IconsService,
-              private elementRef: ElementRef) {}
+  constructor(private iconsService: IconsService) {}
   
   ngOnInit() {
-    this.style = {
-      transform: 'scale(' + this.ratio + ')',
-      fill: this.fill,
-      stroke: this.stroke
-    };
-    //this.elementRef.nativeElement.style = 'line-height: ' + this.ratio*20 + 'px; height: 20px';
+    if(this.svg) {
+      this.style = {
+        transform: 'scale(' + this.ratio + ')',
+        fill: this.fill,
+        stroke: this.stroke
+      };
+    } else {
+      this.style = {
+        "font-size.px": this.ratio*20,
+        fill: this.fill,
+        stroke: this.stroke
+      };
+    }
   }
 }
diff --git a/utils/section-scroll/section-scroll.component.ts b/utils/section-scroll/section-scroll.component.ts
index c8291aa5..92c57971 100644
--- a/utils/section-scroll/section-scroll.component.ts
+++ b/utils/section-scroll/section-scroll.component.ts
@@ -31,16 +31,20 @@ export class SectionScrollComponent implements OnInit {
   
   @HostListener('window:resize', ['$event'])
   onResize(event) {
-    this.fixed = document.querySelector('[fixed]');
-    this.scroll = document.querySelector('[scroll]');
-    this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
+    this.setHeight();
   }
   
   
   ngOnInit() {
-    this.fixed = document.querySelector('[fixed]');
-    this.scroll = document.querySelector('[scroll]');
-    this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
+    this.setHeight();
+  }
+  
+  setHeight() {
+    if(typeof document !== "undefined") {
+      this.fixed = document.querySelector('[fixed]');
+      this.scroll = document.querySelector('[scroll]');
+      this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
+    }
   }
   
   get height():number {