LWC Button Icon Name is not displayed sometime during page load:

Question

I have created below LWC Button with icon-name.

<template>
        <div class="slds slds-p-around--medium">
            <lightning-card class="slds-theme_shade wrapper" variant="base" title={label.CriteriaSection}
                icon-name="standard:topic">
                <lightning-record-edit-form object-api-name="ABC__c" onsuccess={handleSuccess}>
                    <lightning-button variant="brand" label={label.SearchBtn} title={label.SearchButton}
                        onclick={handleSearchClk} icon-name="utility:search" class="slds-m-left_x-small">
                    </lightning-button>
                    <lightning-button variant="destructive" label={label.ResetBtn} title={label.ResetButton}
                        onclick={handleResetClk} icon-name="utility:reset_password" class="slds-m-left_x-small">
                    </lightning-button>
                </lightning-record-edit-form>
                
            </lightning-card>
            </div>
</template> 

During page load sometimes the icon-name loads. If it does not load then I have to refresh the page again and again till icon-name is loaded. It loads label name correctly.

When it does not load, I have observed below warning message to the chrome browser console. I am on chrome version 84.

A cookie associated with a cross-site resource at http://salesforce.com/ was set without the SameSite attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

also there is an issue tab where below error message is displayed:

Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:

Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use. Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests

in affected resource it shows icon name which is failed to load.

Can someone please help?

Answer 1

This is a known issue and already reported to Salesforce and Chromium. I hope it will be resolved very soon. Already 122 people including me have reported it, you can also do so.

In Chrome version 84, some icons, such as Help [question icon], Setup [gear icon]), are not appearing.

The problem was introduced with the Chrome version 84 and has been reported to the Chromium project, and can be tracked at the URL: https://bugs.chromium.org/p/chromium/issues/detail?id=1107442. While this issue is not exclusive to Salesforce, we are monitoring closely as we understand this has a high impact on our users.