1

I'm trying to use one of the action icons from the lightning design system on my visualforce page. But I'm getting the icon color in black & white.

I have tried to fill color from the CSS too but it's not working.

My code:

<span class="slds-icon_container slds-icon_container_circle slds-icon-action-delete" title="Delete">
  <svg aria-hidden="true" class="iconss">
    <use
    xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/action-sprite/svg/symbols.svg#delete')}"></use>
  </svg>
</span>

I'm getting the following image

enter image description here

instead, I need like this

enter image description here

Could someone help to achieve this

Improve this question
2

1 Answer 1

Reset to default
2

There could be couple of things which you might not have initialized in your Visualforce page.

  1. Enable the lightning style sheet at page level.
  2. doctype
  3. Specifying these links at page level : xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

I tried the guidelines of Salesforce of incorporating the icons in Visualforce page and it worked. Refer the trailhead example here:Trailhead and LDS guidelines for Visualforce page. Also refer sample below example which I tried:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
 <meta charset="utf-8" />
 <meta http-equiv="x-ua-compatible" content="ie=edge" />
 <title>Salesforce Lightning Design System Trailhead Module</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <!-- Import the Design System style sheet -->
 <apex:slds />
</head>
<body>
 <!-- REQUIRED SLDS WRAPPER -->
 <div class="slds-scope">
 <!-- PRIMARY CONTENT WRAPPER -->
 <div class="myapp">
 <!-- SECTION - BADGE COMPONENTS -->
 <div>
 <span class="slds-icon_container slds-icon_container_circle slds-icon-action-delete" title="Delete icon">
  <svg class="slds-icon" aria-hidden="true">
    <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/action-sprite/svg/symbols.svg#delete')}"></use>
  </svg>
  <span class="slds-assistive-text">Delete icon</span>
</span>
 </div>

 <!-- / SECTION - BADGE COMPONENTS -->
 </div>
 <!-- / PRIMARY CONTENT WRAPPER -->
 </div>
 <!-- / REQUIRED SLDS WRAPPER -->
</body>
</html>
</apex:page>

Follow the steps mentioned by Salesforce in the trailhead.

Improve this answer
1
  • 1
    Yep, it works like charm. Thanks, I understood the issue with my SLDS class initialization
    – Pavan tej
    Commented Dec 17, 2019 at 13:02

You must log in to answer this question.

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