在 LWC 中嵌入带有闪电图标的闪电输入答案

【问题标题】：Embed Lightning-input with lightning-icon in LWC在 LWC 中嵌入带有闪电图标的闪电输入
【发布时间】：2019-12-05 20:41:09
【问题描述】：

有人可以帮助将 lightning-icon 嵌入到 LWC 中的 lightning-input 中的示例

<lightning-input type="search" name="To Address" label="To" 
                              class="slds-input-has-icon_right slds-m-bottom_small">
    <lightning-icon icon-name=action:email>
</lightning-icon>
</lightning-input>

我也尝试过以下方法，但不起作用

<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
    <lightning-icon icon-name="utility:adduser" size="medium">
    </lightning-icon>
    <input type="text" id="text-input-id-1" class="slds-input" />
</div>

【问题讨论】：

标签： salesforce salesforce-lightning lwc

【解决方案1】：

这是解决方案！

<lightning-button-icon class="btnIconOverlay" icon-name="utility:adduser">
</lightning-button-icon>
<lightning-input type="search" name="To Address" value={toAddress}>              
</lightning-input>

将以下 CSS 添加到闪电按钮图标中，这有助于覆盖图标。

.btnIconOverlay {
    position: absolute;
    z-index: 1;
    margin: 0.5% 0 0 92%;
}

【讨论】：