AAE-40703 Add support for content projection (#11462)

lib/core/src/lib/icon/icon.component.html

@@ -1,3 +1,5 @@
+<ng-content />
+
 @if (isSvg) {
   <mat-icon [color]="color" [svgIcon]="value" aria-hidden="true" />
 } @else {

lib/core/src/lib/icon/icon.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, inject } from '@angular/core';
+import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, inject, ElementRef, AfterContentInit } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { ICON_ALIAS_MAP_TOKEN } from './icon-alias-map.token';
@@ -30,8 +30,9 @@ export const DEFAULT_ICON_VALUE = 'settings';
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: { class: 'adf-icon' }
 })
-export class IconComponent {
+export class IconComponent implements AfterContentInit {
     private readonly ALIAS_MAP = inject(ICON_ALIAS_MAP_TOKEN, { optional: true });
+    private readonly elementRef = inject(ElementRef);
 
     private _value = DEFAULT_ICON_VALUE;
     private _isSvg = false;
@@ -65,6 +66,15 @@ export class IconComponent {
         this._isSvg = isSvg;
     }
 
+    ngAfterContentInit(): void {
+        const textNode = this.getTextNode();
+
+        if (textNode) {
+            this.value = textNode.textContent.trim();
+            textNode.remove();
+        }
+    }
+
     private hasMappedAlias(value: string): boolean {
         return !!this.ALIAS_MAP?.[value];
     }
@@ -72,4 +82,10 @@ export class IconComponent {
     private isCustom(value: string): boolean {
         return value.includes(':');
     }
+
+    private getTextNode(): Text | undefined {
+        return Array.from(this.elementRef.nativeElement.childNodes).find(
+            (node: Node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim()
+        ) as Text | undefined;
+    }
 }