如何在PrimeNG的pInputText中使用自定义SVG组件图标？

问题原因 #

PrimeNG的p-input-icon-right容器是通过对内部<i>标签应用绝对定位+垂直居中的样式来实现图标嵌入输入框右侧的。你的自定义SVG组件没有继承这些默认样式，所以会直接叠加在输入框上方。

解决方法 #

方法1：给自定义组件添加定位样式

在使用自定义组件的地方，直接给它加上必要的CSS定位规则：

<div class="p-input-icon-right">
  <custom-element [icon]="'loading'"></custom-element>
  <input
    pInputText
    class="input-text"
    [(ngModel)]="inputText"
    [placeholder]="'Please enter text'"
    type="text"
  />
</div>

在全局样式或组件样式中添加：

.p-input-icon-right {
  position: relative; /* 确保图标相对于容器定位 */
}

.p-input-icon-right custom-element {
  position: absolute;
  right: 0.75rem; /* 和PrimeNG默认图标间距一致 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 避免图标遮挡输入框的点击/输入事件 */
  color: #6c757d; /* 可选：匹配PrimeNG默认图标颜色 */
}

方法2：修改自定义组件内部结构（推荐）

如果可以修改自定义SVG组件的代码，把SVG包裹在<i>标签里，直接继承PrimeNG的图标样式：

<!-- custom-element.component.html -->
<i class="pi">
  <!-- 你的SVG代码 -->
  <svg [ngClass]="getIconClass(icon)" width="16" height="16" viewBox="0 0 24 24">
    <!-- SVG路径内容 -->
  </svg>
</i>

这样使用时无需额外加样式，直接沿用PrimeNG的p-input-icon-right布局即可：

<div class="p-input-icon-right">
  <custom-element [icon]="'loading'"></custom-element>
  <input
    pInputText
    class="input-text"
    [(ngModel)]="inputText"
    [placeholder]="'Please enter text'"
    type="text"
  />
</div>

方法3：给自定义组件添加PrimeNG图标类

直接给自定义组件添加PrimeNG的pi基类，让它继承默认图标样式：

<div class="p-input-icon-right">
  <custom-element [icon]="'loading'" class="pi"></custom-element>
  <input
    pInputText
    class="input-text"
    [(ngModel)]="inputText"
    [placeholder]="'Please enter text'"
    type="text"
  />
</div>

如果仍有位置问题，再补充方法1中的定位样式即可。

内容的提问来源于stack exchange，提问作者Aastha B