<apex:slds /> against static resource

Question

I'm using SLDS datepicker on my VF page. I tried <apex:slds /> at the first place to load utility-sprite event icon to click and load the calendar. But it didn't load properly. Then i switched back to good old SLDS static resource. And it started loading. What could go wrong here. Here is my code. Appreciate your help.

<div class="slds-form-element__row">
    <div class="slds-form-element">

        <label class="slds-form-element__label boldText">Start Date</label>

        <div class="slds-input-has-icon slds-input-has-icon--right">

            <!-- Works with static resource but not with <apex:slds /> -->

            <svg aria-hidden="true"  class="slds-input__icon slds-input__icon--right slds-icon-text-default">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#event')}"></use>
            </svg>

            <!--
            <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#event" />
            </svg>
            -->
            <input id="fromdate" value="{!displayStartDate}" class="slds-input" type="Text" tabindex="8" label="From"/> 
            <apex:inputHidden id="fromHidden" value="{!startDate}"/>


        </div>

    </div>
</div>

Answer 1

Tried the below and it works. the key is the static resource name you need to refer is

$Asset.SLDS

from documentation

To reference assets in the Lightning Design System, such as SVG icons and other images, use the URLFOR() formula function and the $Asset.SLDS global variable. To use SVG icons, add the required XML namespaces by using xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink" in the html tag.

<apex:page >
    <apex:slds />
    <div class="slds-form-element__row">
    <div class="slds-form-element">

        <label class="slds-form-element__label boldText">Start Date</label>

        <div class="slds-input-has-icon slds-input-has-icon--right">

            <!-- Works with static resource but not with <apex:slds /> -->

            <svg aria-hidden="true"  class="slds-input__icon slds-input__icon--right slds-icon-text-default">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#announcement')}"></use>
            </svg>




        </div>

    </div>
</div>
</apex:page>