Appyphony lightning JS not showing slds icons correctly

Question

I am using Appyphony Lightning JS to create lookup relationship field for me. Everything else was working pretty well. But the slds icons are not displaying well. I am constantly getting the below error in chrome's developer tool:

Unsafe attempt to load URL https://ap2.salesforce.com/assets/icons/standard-sprite/svg/symbols.svg#account from frame with URL https://v6.ap2.visual.force.com/apex/Auto_Subscription_Edit?retURL=%2Fa08%2Fo&save_new=1&sfdc.override=1. Domains, protocols and ports must match.

And the lookup relationship field now looks like this:

I have added the initialization code as below:

        var assetsLocation = "{!URLFOR($Resource.Slds213, 'assets')}";
        $.aljsInit({
            assetsLocation: '',
            scoped: true
        });

Is there anything else I am missing here?

Answer 1

In appyphony, the assetsLocation is meant to specify the location of the resource, not the actual assets directory itself.

So change the line into:

var assetsLocation = "{!URLFOR($Resource.Slds213)}";

And hopefully it will work.

Answer 2

"Appyphony Lightning JS" was working for old SLDS bundles because Icons were exist in the 'Assets' folder but now icons are exist directly in 'icons' folder.

There is a mistake in Appyphony js files. Please follow these steps:

1. Open 'jquery.aljs-all-with-moment.min.js' file and search for 'svg#account' or any icon you want to show in your plugin.

2. Replace this URL '/assets/icons/standard-sprite/svg/symbols.svg#account' with '/icons/standard-sprite/svg/symbols.svg#account'.

3. Save file 'jquery.aljs-all-with-moment.min.js'.

4. Now initialize assetlocation just like below if you are using "apex:slds" in your VF Page:

   $.aljsInit({
       assetsLocation: '/_slds',
       scoped: true
   });