Lightning-icon not working in Lightning-formatted-text tag in LWC

Question

I have a Lightning-formatted-text tag in place which displays error from JS and apex controller. Now I want this error to be displayed along with error icon on the component. Below is the HTML code:

 <lightning-formatted-text icon-name="utility:error" class="slds-text-color_error" value={warningMessage}></lightning-formatted-text>

Now when the error occurs on the component, I am getting error message, but not error icon. When I use Lightning-icon tag, the error icon is displaying even before the error message is displayed. Like it is staying on the page all the time.

Can anyone help me out here

Answer 1

lightning-formatted-text doesn't have an icon-name attribute.

You can display the icon separately, and only when there's an error, like this:

<lightning-icon icon-name="utility:error" if:true={warningMessage}>
</lightning-icon>