Component: IconField wrong icon positioning

[Salvatore-tech]

Describe the bug

When using the IconField component, And the icon's position is set to "right", Then the icon is wrongly showed to the left and not wrapped inside the input component.

<p-iconField iconPosition="right">
  <p-inputIcon styleClass="pi pi-spinner pi-spin"></p-inputIcon>
  <input type="text" pInputText />
</p-iconField>

Environment

Nothing to add other than below.

Reproducer

No response

Angular version

17.1

PrimeNG version

17.18.9

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.2.0

Browser(s)

Chrome 128.0.6613.84

Steps to reproduce the behavior

No response

Expected behavior

I would expect that the icon would be wrapped inside the input component and showed to the right hand side.

[m1kl]

I am getting exactly the same issue with the icon aligned to the left. I am using Angular 18.12 and primeng 17.18.6.

 <p-iconField iconPosition="left" class="ml-auto" [formGroup]="searchForm!">
      <p-inputIcon>
        <i class="pi pi-search"></i>
      </p-inputIcon>
      <input
        pInputText
        type="text"
        formControlName="value"
        placeholder="Search keyword"
      />
    </p-iconField>

[javierjsp]

try importing your actual theme throught node_modules/primeng/resources/themes/ ,

example:

• delete the import in index.html and move to styles.scss

@import "../node_modules/primeng/resources/themes/lara-light-blue/theme.css";

• Make sure you import only once the theme.
• Try Again

Maybe the problem is you have a older theme compiled, remember allways check if your are using a custom theme, and not directly from the primeng installation, you will need to compile yourself your custom theme or use the base themes.

https://github.com/primefaces/primeng-sass-theme

I hope it will help.

[MrTob]

i have a similar error im using

• angular 18
• primeng 18.2.0
• tailwindcss

this is my code

<p-iconField iconPosition="left">
      <p-inputIcon>
        <!-- ng-icon -->
      </p-inputIcon>
      <input type="text" pInputText placeholder="Search" />
</p-iconField>

this the style.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'primeng/resources/themes/lara-light-blue/theme.css';
@import 'primeng/resources/primeng.css';

and this is the result

any ideas how to fix it?

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[matthiasT-13]

I have opened an issue in the primeuix repo for this bug

[matthiasT-13]

@mertsincan After doing an investigation, I think I have identified that this is an issue that can be fixed in the primeuix repo. I have opened an issue here and associated pr here. Hope you can take a look, thanks.