Questions tagged [svg-icon]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
-3
votes
1answer
33 views

Depending icon at visualforce page

I would like to insert a picture depending on the type at my visualforce page. My code below does n't work, could you help me please. <span class="slds-icon_container" style="...
1
vote
0answers
49 views

Missing icons on Salesforce report buttons in Chrome

The icons in Salesforce report buttons are missing in Chrome, since several months now. This somewhat related known issue Some icons disappear in Chrome 84 is "In review" and even though the ...
0
votes
0answers
37 views

LWC svg logo breaks in experience builder

I have a scratch org in which I have created an LWC component with a custom component.svg file for experience builder. The svg icon loads perfectly in app builder but it breaks in experience builder ...
1
vote
2answers
53 views

Are there any limitations to SVGs in Salesforce?

I am trying to display an SVG in a Lighting Web Component. I have noticed that the SVG is not rendering properly, and removing filter="url(#filter0_d)" in the g tag fixes the issue. This ...
0
votes
1answer
33 views

Why is the button icon not displayed?

Here is the code of my html file in LWC: <div> <lightning-button label="Update" onclick={connectedCallback} class="slds-button_icon"> <svg class="...
1
vote
1answer
38 views

Button Icon color is not changing using the fill CSS

Trying to change the icon color to red, Icon color is not changing. when i use fill It just filling the color in middle as below. <button class="slds-button slds-button_icon" title="...
0
votes
0answers
21 views

how to use SLDS icon at visualforce page [duplicate]

I need a picture at my visualforce page and I tried to add the slds-icons. The version with the "{!URLFOR(..." works, but I can't use the settings like slds-icon_x-small, if I use the ...
0
votes
1answer
258 views

Icon Size and color

Hi Kindly help me out for the below , i need to alligned the icon properly with the text next to it and make it red color ,,, kindly help me out for this. code: <lightning-button-icon class='slds ...
0
votes
0answers
109 views

render third party SVG in LWC not working

I have a zip file named svgFlags and inside svgFlags there is a folder named SVG with bunch of SVG files as shown in the below screenshot: HTML: <svg xmlns="http://www.w3.org/2000/svg" ...
0
votes
2answers
1k views

LWC: How to display svg icons

I'm trying to render a button with an icon just next to the text, unfortunately, the icon doesn't show even if it uses the space next to the text. <template> <button class="slds-...
0
votes
1answer
118 views

upload icon is not applying for use tag in lightning component

I have uploaded Icon's in static resource as a zip format and when i am trying to get upload icon from them while saving component it is throwing error. No function found for key: URLFOR: Source <...
0
votes
1answer
387 views

Lightning-icon not working in Lightning-formatted-text tag in LWC

I have a Lightning-formatted-text tag in place which displays error from JS and apex controller. Now I want this error to be displayed along with error icon on the component. Below is the HTML code: ...
1
vote
1answer
163 views

Lightning Visualforce page header with icon has no margin and icon not showing. What is wrong?

I have a Lightning Visualforce page which I am displaying via a Detail Page Button from a standard Account page. I am displaying it as 'Display in existing window without sidebar or header'. It is ...
3
votes
1answer
988 views

What is the path to Lightning SVG icons in a sandbox?

So far I have found and tried three paths, but none of them is resulting in an icon being displayed. I am using this code, provided by Salesforce: <div class="slds-form-element"> <label ...
1
vote
1answer
404 views

Unable to display action lightning design icon in visualforce page

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 ...
1
vote
2answers
1k views

How can I create a reusable lightning web component icon using a custom SVG file?

I want to create a reusable icon as a lightning web component. I found the following documentation: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_svg_in_component ...
0
votes
0answers
404 views

SLDS icon not working in production but working in community and sandbox

I have a VF page which is sitting inside a managed package. This page displays a bunch of records and allows users to comment, edit and delete records. I have used SLDS icons to display my action ...
0
votes
1answer
2k views

Lightning Icon Background color not changing

I have a lightning icon in my lightning component. It is an icon of type standard and I want to change its color: Component <div class="slds-media__figure"> <lightning:icon iconName="...
0
votes
1answer
2k views

No COMPONENT named markup://svg found [duplicate]

After downloading the SLDS I have copied a detail form from the lightning design system to the salesforce console. But when I save there is a popup saying "No COMPONENT named markup://svg found". I ...
0
votes
1answer
482 views

Access svg icon from static resource zip file

I have added zip file of lightning design system which contains fonts,icon,images,style folders. in this svg icons are in icons/utility-sprite/svg folder, i have set the path but it;s not reflecting ...
0
votes
1answer
2k views

Finding icon-names for Web Component lightning cards

In an example of creating a lightning web component, the html used a lightning-card tag. Within that tag, it declared a title and icon-name, where the icon pointed to custom:custom19 <template> ...
0
votes
1answer
2k views

how to add slds info icon in VF page? [duplicate]

In my VF page i have header .I want to display info icon before my text (before Note). Vf Code <div class="slds-page-header"> <apex:outputpanel rendered="{!isSuccess}"> <...
1
vote
2answers
562 views

SVG Polygon Shape in Lightning Component using SLDS

I created a Div using HTML/CSS to look like: Below is the Code: HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head&...
1
vote
1answer
743 views

SVG tags in Lightning Component

Is there a way to use SVG tags in lightning components? I would like to build and display about 6 SVG icons, but unable to use <svg> tag in the component. Is there any workaround for this?
9
votes
1answer
3k views

How to use slds illustration?

I looked into this to use illustration in my component. https://lightningdesignsystem.com/components/illustration/ As we can't use svg tag in lightning component, so is there any way by which we can ...
6
votes
2answers
9k views

Custom icons from static resource on <lightning:icon> not working

Trying to show custom icons from my static resource zip file using lightning:icon within a community, but it's not rendering the icons. It works for img tag, but I need to use fill to change the ...
1
vote
1answer
1k views

Adding SVG file to CloudPages

I'm trying to add an SVG file to a CloudPage in Marketing Cloud. Though the file type is enabled in our MC Account, SF support says we need to create an AMPscript in order to include these files. I ...
2
votes
1answer
3k views

Lightning button action in VF page

I have below commandbutton that works fine for me. When I try to convert to lightning buttons it simply just reloads the page and does nothing as expected like calling the pagereference method and ...
5
votes
3answers
1k views

Lightning Icons (SVG) not displaying in Lightning Out

For some reason lightning:icon is not displaying the svg in Lightning Out. I tried also lightning:buttonIcon and lightning:button with icon. Here is my ActivityTimeline (custom component) which uses ...
0
votes
1answer
321 views

<apex:slds /> against static resource

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 ...
4
votes
2answers
3k views

How to use progress ring with lightning component

In recent release salesforce has released progress ring part of SLDS. https://www.lightningdesignsystem.com/components/progress-ring/#content I am little confused on how to use this with lightning ...
8
votes
1answer
2k views

Dynamically Render Toast Message With Icon?

I wrote a dynamic component to build toast messages based on ApexPages.Message in my answer here, but one aspect of it has been bothering me ever since, and I'm trying to fix it. When the toast is ...
0
votes
1answer
377 views

Custom SVG Icons in IE 11 inside Lightning Component not rendering

I know this has been asked a lot and with revamped extended IE 11 support for Lightning by Salesforce, the issue with SVG icons in Lightning Component arise again. I've been through the forum ...
0
votes
1answer
352 views

Lightning Icon 404 Not found

I copied this straight from Lightning Components Developer Guide and there is 404 error and I don't know why and how to fix it. <aura:handler name="init" value="{!this}" action="{!c....
2
votes
2answers
522 views

SVG Icon from Aura Bundle doesn't display in App Builder

So that my Lightning component displays nicely in the App Builder I added a .svg file to the bundle and copy & pasted the SVG from the Lightning Design System Icons. <?xml version="1.0" ...
11
votes
3answers
14k views

SLDS icon not appearing in visualforce page

Script 1: Does not Work <apex:page > <apex:stylesheet value="{!URLFOR($Resource.slds221, 'assets/styles/salesforce-lightning-design-system.min.css')}"/> <svg aria-hidden="true" ...
3
votes
2answers
17k views

lightning:icon not lightning:button with iconName attribute is not displaying

Tried in all browsers (IE, Chrome, Firefox) - but the icon is not displayed and I'm getting the following error message in the console: Unknown token "lightning.utilitySprite" default value was ...
6
votes
2answers
2k views

SVG Icons not displaying in Spring '17 pre-release environment

I'm seeing SVG icons not rendering in a Spring '17 environment. I'm using custom SVG lightning component from SLDS framework. The icons in my component continue to display correctly in existing Winter ...
2
votes
1answer
2k views

How can I use custom svg icons in a lightning component?

I have svg icons uploaded as static resource. How can I use these icons in a lightning component?
1
vote
1answer
161 views

Lightning ltng:require in svg

In my Lightning Component, I have the following SVG file for a logo to be shown on the community builder page (when you install a Lightning Component). //ComponentName.svg <?xml version="1.0" ...
1
vote
1answer
450 views

svgIcon doesn't work, url throws 404

I am new to SForce lightning, i have added svgIcon component as described by the link: https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/ But when i try: <c:...
5
votes
1answer
134 views

Does Salesforce Locker Service has full support for svg?

I am working on enabling locker service for our org and we are using progressbar.js to render some of the metrics. However, I find that the progressbar.js throws up errors when locker service is ...
0
votes
2answers
1k views

Lightning Design System SVG Path Issues

I am trying to display an icon in a lightning component using LDS. I setup the svg helper, component, and renderer as per the LDS docs here. I also have a static resource stored in SalesForce. I am ...
1
vote
1answer
1k views

SVG Icon not displaying in IE11

SVG icon is not displaying in IE 11 but working in other browsers. I tried to set absolute path for svg but still not working. Updated with below code but still not working. <apex:includeScript ...
3
votes
2answers
1k views

Icon color <svgIcon> helper component (Community Lightning)

I'm using the helper component suggested on the Lightning Design System Icon documentation page for adding icons to Community components. I'd like to change the color of the icon, and not use a ...
0
votes
1answer
516 views

Don't understand the usage of <c:svgIcon> helper (Lightning Design System - Communities)

I'm trying to use different icons included in the icon package on the lightning design system. I'm rendering them inside a lightning component that is available in the Community Builder tool. I'm a ...
13
votes
5answers
36k views

Lightning : Icon color is not changing using the fill CSS

According to the documentation (https://www.lightningdesignsystem.com/components/icons/ ) we can change the icon color by using the CSS. I am not able to do it. It always overrides with the Salesforce ...
2
votes
1answer
871 views

How to get SVG image coordinates in Lightning

I am displaying SVG image in Lightning, when I click on particular part in image I need to get co ordinates of that SVG image. Please help me to achieve this.
3
votes
3answers
2k views

Lightning design system - SVG disappears after rerender

I am building data table, here is html code from browser before rerendering table. I use actionFunction with rerender attribute. The problem is that svg disappears after rerendering. Before rerender: ...
0
votes
1answer
675 views

Salesforce custom SVG component showing background of icon but not image

I'm using this page to create my custom SVG component. However, the image background is showing up but not the icon inside the image. The SVG component is the exact same as on the page. I tried ...