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.

Improve this question

1 Answer 1

Reset to default
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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .