I am trying to use lightning file upload icon in visualforce page using slds.The problem is button is displaying but the upload icon is not displaying in the button it is coming blank

<apex:page controller="updateProfilePhotoController" docType="html-5.0" sidebar="false" showHeader="false">
<apex:slds />
<apex:form enctype="multipart/form-data">
    <apex:pageMessages />
    <apex:pageBlock title="Upload Profile Photo">
        <apex:pageBlockButtons >
            <apex:commandButton action="{!upload}" value="Save"/>
        <div data-reactroot="" class="slds-form-element">
            <span class="slds-form-element__label" id="file-selector-id">Attachment</span>
            <div class="slds-form-element__control">
                <div class="slds-file-selector slds-file-selector_files">
                    <div class="slds-file-selector__dropzone">
                        <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" aria-describedby="file-selector-id"/>
                        <label class="slds-file-selector__body" for="file-upload-input-01">
                            <span class="slds-file-selector__button slds-button slds-button_neutral">
                                <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                   <!-- <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>-->
                                </svg>Upload Files</span>
                            <span class="slds-file-selector__text slds-medium-show">or Drop Files</span>



the icon of upload button is not showing

  • If I remember correctly, you need to use HTML 5.0 <apex:page docType="html-5.0" ... in order to have SVG appear correctly.
    – sfdcfox
    Nov 18 '19 at 13:32
  • @sfdcfox thanks for your reply but still it is not working i have updated the code by adding doctype. Nov 19 '19 at 11:37

Solved: I was using standard-sprite instead of action-sprite. You will find different icons of different categories. The upload icon doesn't come in standard icon categories, it comes in action categories.

  • 1
    This answer would be improved if you would include a "before" and "after" snippet. If you could also explain why standard-sprite was wrong (and why action-sprite) is correct, that'd make this question (and answer) more helpful for other people with similar questions too.
    – Derek F
    Nov 19 '19 at 13:05
  • As their are categories in slds icon if you open the slds icon you will find out different icons of different categories upload icon doesn't come in standard icon categories it comes in action categories. Nov 20 '19 at 5:47

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.