Add material icons on icon component

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() {
+    if(this.svg) {
       this.style = {
         transform: 'scale(' + this.ratio + ')',
         fill: this.fill,
         stroke: this.stroke
       };
-    //this.elementRef.nativeElement.style = 'line-height: ' + this.ratio*20 + 'px; height: 20px';
+    } else {
+      this.style = {
+        "font-size.px": this.ratio*20,
+        fill: this.fill,
+        stroke: this.stroke
+      };
+    }
   }
 }

utils/section-scroll/section-scroll.component.ts

@@ -31,17 +31,21 @@ 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.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 {
     return this.fixed?this.fixed.offsetHeight:0;