refactor(icon): afterNextRender in case of SSR

Author: xidedix

projects/coreui-icons-angular/src/lib/icon/icon.component.ts

@@ -12,7 +12,9 @@ import { toCamelCase } from './icon.utils';
   templateUrl: './icon.component.svg',
   styleUrls: ['./icon.component.scss'],
   standalone: true,
-  imports: [NgClass, NgIf, HtmlAttributesDirective]
+  imports: [NgClass, NgIf, HtmlAttributesDirective],
+  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+  host: { ngSkipHydration: 'true' }
 })
 export class IconComponent implements IIcon, AfterViewInit {
 

projects/coreui-icons-angular/src/lib/icon/icon.directive.spec.ts

@@ -41,10 +41,11 @@ describe('IconDirective', () => {
     sanitizer = fixture.componentRef.injector.get(DomSanitizer);
     iconSetService = fixture.componentRef.injector.get(IconSetService);
   });
-
   it('should create an instance', () => {
-    const directive = new IconDirective(renderer, svgEl, sanitizer, iconSetService);
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new IconDirective(renderer, svgEl, sanitizer, iconSetService);
+      expect(directive).toBeTruthy();
+    });
   });
   it('icon classes should be applied', () => {
     expect(svgEl.nativeElement).toBeTruthy();

projects/coreui-icons-angular/src/lib/icon/icon.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
+import { afterNextRender, Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 import { IconSetService } from '../icon-set';
@@ -51,7 +51,7 @@ export class IconDirective implements IIcon {
     return this.customClasses ?? classes;
   }
 
-  @HostBinding('innerHtml')
+  // @HostBinding('innerHtml')
   get innerHtml() {
     const code = Array.isArray(this.code) ? this.code[1] || this.code[0] : this.code ?? '';
     // todo proper sanitize
@@ -64,7 +64,11 @@ export class IconDirective implements IIcon {
     private elementRef: ElementRef,
     private sanitizer: DomSanitizer,
     private iconSet: IconSetService
-  ) { }
+  ) {
+    afterNextRender(() => {
+      this.elementRef.nativeElement.innerHTML = this.innerHtml;
+    });
+  }
 
   get titleCode(): string {
     return this.title ? `<title>${this.title}</title>` : '';