10

I am using the Lightning Design System Utility SVG Icons on a Salesforce page. In addition to appearing as expected in Firefox, Safari, and Chrome, I've also done everything necessary (including using svg4everybody) so they appear fine when using:

  • Salesforce Classic with IE 11
  • Salesforce Lightning Experience with IE
  • Salesforce Classic with MS Edge

However, they don't appear fine when using Salesforce Lightning Experience with MS Edge. What is different about Edge with Lightning Experience that they aren't appearing?

  • This was supposed to be fixed in Spring '17 but I'm still seeing it as an issue. github.com/salesforce-ux/design-system/issues/247 – Rozgonyi Jul 27 '17 at 20:45
  • Still having this issue with svg4everybody v2.1.9. Any updates from anyone else experiencing this problem?? – Brent Bow Aug 21 '17 at 17:20
  • Console error message: CSP14312: Resource violated directive 'frame-src https: mailto:' in Content-Security-Policy: /resource/1484344071000/SLDS/assetts/icons/utility-sprite/svg/symbols.svg. Resource will be blocked. – Brent Bow Aug 21 '17 at 18:22
  • Also SCRIPT445: Object doesn't support this action which is the error message that was displayed in IE11 before using @sv-alex's fix for svg4everybody – Brent Bow Aug 21 '17 at 18:23
3
+50

I'm not sure what is different about MS Edge, but I faced the same problem and managed to solve it by using svgxuse instead of svg4everybody.

Here are the steps:

  1. Go to this GitHub repo: https://github.com/Keyamoon/svgxuse
  2. Download the svgxuse.min.js file
  3. Upload it as static resource to Salesforce
  4. Include it in your Visualforce page
  • You used svgxuse instead of svg4everybody then? Or in addition to? – Brent Bow Aug 22 '17 at 18:33
  • Instead. I haven't used svg4everybody. – smukov Aug 22 '17 at 18:34
  • Well I'll be! Thank you, @smukov. It appears to be working in both Edge and IE11, whereas I was only able to support one or the other with svg4everybody. Pretty sure this will take the bounty, but will leave open for a bit longer – Brent Bow Aug 22 '17 at 18:44
  • @BrentBow No problem. I'm glad I helped :) – smukov Aug 22 '17 at 18:56
  • 1
    Ah, I see. Ya, the error only appears in LEX. A workaround for the time being is to use both svg libs, one with a modification just for IE11. – Brent Bow Aug 23 '17 at 22:53

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.