1

I have a Lightning Visualforce page which I am displaying via a Detail Page Button from a standard Account page. I am displaying it as 'Display in existing window without sidebar or header'.

It is displaying as below - there are no margins around the page header, and the icon isn't showing. What am I missing?

enter image description here

I would like the header to display as a standard page does, with margins around it, like this: enter image description here

<apex:page standardController="Account" extensions="verifyController" docType="html-5.0">
<apex:slds />
<body>
    <div class="slds-scope">
        <div class="slds-page-header slds-m_large" role="banner">
            <div class="slds-grid slds-m_large">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media slds-media--center slds-no-space slds-grow">
                        <div class="slds-media__figure">
                            <span class="slds-icon_container slds-icon_container_circle slds-icon-action-description" title="Description of icon when needed">
                                <svg aria-hidden="true" class="slds-icon">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/action-sprite/svg/symbols.svg#description"></use>
                                </svg>
                            </span>
                        </div>
                        <div class="slds-media__body">                    
                            <p class="slds-text-heading--label slds-p-bottom_small">Account Verification</p>
                            <h1 class="slds-page-header__title slds-truncate" title="Account Name">{!acct.firstName & ' ' & acct.lastName}</h1>
                        </div>
                        <div class="slds-col slds-no-flex slds-grid slds-align-top">
                            <button class="slds-button slds-button_neutral">Verify</button>
                        </div>
                    </div>
                </div>
            </div>   
        </div>     
    </div>
</body>
</apex:page>

UPDATE: I added lightningstylesheets="true" to the declaration, which solved the margin problem, but am still not seeing the icon.

2

The following URL seems to works

<svg aria-hidden="true" class="slds-icon">

 <use xmlns:xlink="http://www.w3.org/1999/xlink"  xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/action-sprite/svg/symbols.svg#description')}"></use>
</svg>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.