diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
index 03fd08b909f..e9603f47cb4 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.component.html
+++ b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -3,7 +3,7 @@
         <ng-content select="[igxLabel]"></ng-content>
     </ng-container>
     <ng-container ngProjectAs="igx-prefix">
-        <ng-content select="igx-prefix"></ng-content>
+        <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
     </ng-container>
     <ng-container ngProjectAs="igx-hint, [igxHint]">
         <ng-content select="igx-hint, [igxHint]"></ng-content>
@@ -15,7 +15,7 @@
         [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
         (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
-        <ng-content select="igx-suffix"></ng-content>
+        <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
     </ng-container>
     @if (displayValue) {
         <igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button"
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html
index d285daee768..a5d56f0cd59 100644
--- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html
+++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html
@@ -5,7 +5,7 @@
     </ng-container>
 
     <ng-container ngProjectAs="igx-prefix">
-        <ng-content select="igx-prefix"></ng-content>
+        <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
     </ng-container>
 
     <ng-container ngProjectAs="igx-hint, [igxHint]">
@@ -21,7 +21,7 @@
         (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (blur)="onBlur()" (paste)="handleInputChange($event)"/>
 
     <ng-container ngProjectAs="igx-suffix">
-        <ng-content select="igx-suffix"></ng-content>
+        <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
     </ng-container>
 
     @if (hasSelectedItem) {
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.html b/src/app/input-group-showcase/input-group-showcase.sample.html
index d9e7a86b826..f3561b9729d 100644
--- a/src/app/input-group-showcase/input-group-showcase.sample.html
+++ b/src/app/input-group-showcase/input-group-showcase.sample.html
@@ -87,6 +87,8 @@ <h1 class="showcase__title">Angular</h1>
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
+            <igx-icon igxPrefix [hidden]="hidePrefix()">favorite</igx-icon>
+            <igx-icon igxSuffix [hidden]="hideSuffix()">favorite</igx-icon>
             <igx-hint>Select a unique falsy value</igx-hint>
         </igx-combo>