Questions tagged [svg-icon]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
0 votes
1 answer
38 views

LWC Lightning-icon color is not changing using fill Css

Not able to change the icon Color using Css. <lightning-icon icon-name="utility:arrowup" class="blueArrow" size="medium"></lightning-icon> CSS file ....
user avatar
6 votes
0 answers
35 views

Rules for lightning-icon static resource svgs [duplicate]

We are trying to load an svg from a static resource into a lightning-icon using the source attribute. The problem we are facing is that the svg size does not match the icon size. So the icon stays ...
user avatar
  • 61
0 votes
2 answers
372 views

Custom lightning-icon won't render properly

I'm trying to add a custom lightning-icon to my experience cloud lwc module, but I can't make it render properly. The custom icon is basically a blue background color with a white dash on the middle. ...
user avatar
1 vote
1 answer
78 views

Any way to display an SVG that varies row by row via the standard standard Lightning List View component?

I'd like to avoid custom code if possible for a situation where I want to show an SVG in a list view that folds two numbers together: a percent complete and a number of days. That is the second of ...
user avatar
  • 131k
-3 votes
1 answer
36 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="...
user avatar
  • 431
1 vote
0 answers
108 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 ...
user avatar
  • 3,525
1 vote
2 answers
93 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 ...
user avatar
0 votes
1 answer
258 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="...
user avatar
1 vote
1 answer
113 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="...
user avatar
0 votes
1 answer
616 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 ...
user avatar
  • 3
0 votes
0 answers
180 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" ...
user avatar
  • 2,270
0 votes
2 answers
3k 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-...
user avatar
0 votes
1 answer
254 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 <...
user avatar
  • 1,298
0 votes
1 answer
697 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: ...
user avatar
1 vote
1 answer
235 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 ...
user avatar
  • 1,397
4 votes
2 answers
2k 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 ...
user avatar
1 vote
1 answer
604 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 ...
user avatar
  • 1,456
1 vote
2 answers
2k 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 ...
user avatar
0 votes
0 answers
468 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 ...
user avatar
  • 1,323
0 votes
1 answer
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="...
user avatar
  • 1,123
0 votes
1 answer
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 ...
user avatar
0 votes
1 answer
611 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 ...
user avatar
  • 1,298
0 votes
1 answer
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> ...
user avatar
  • 1,000
0 votes
1 answer
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}"> <...
user avatar
  • 29
1 vote
2 answers
702 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&...
user avatar
1 vote
1 answer
854 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?
user avatar
  • 311
9 votes
2 answers
4k 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 ...
user avatar
  • 1,202
7 votes
2 answers
10k 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 ...
user avatar
  • 1,079
1 vote
1 answer
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 ...
user avatar
2 votes
1 answer
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 ...
user avatar
  • 2,900
5 votes
3 answers
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 ...
user avatar
  • 183
0 votes
1 answer
348 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 ...
user avatar
4 votes
2 answers
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 ...
user avatar
  • 365
8 votes
1 answer
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 ...
user avatar
  • 144k
0 votes
1 answer
387 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 ...
user avatar
  • 5,626
0 votes
1 answer
389 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....
user avatar
  • 3
2 votes
2 answers
550 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" ...
user avatar
11 votes
3 answers
16k 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" ...
user avatar
3 votes
2 answers
18k 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 ...
user avatar
6 votes
2 answers
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 ...
user avatar
  • 5,626
2 votes
1 answer
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?
user avatar
1 vote
1 answer
169 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" ...
user avatar
  • 646
1 vote
1 answer
554 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:...
user avatar
5 votes
1 answer
137 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 ...
user avatar
1 vote
2 answers
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 ...
user avatar
1 vote
1 answer
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 ...
user avatar
  • 13.3k
3 votes
2 answers
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 ...
user avatar
1 vote
1 answer
541 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 ...
user avatar
14 votes
5 answers
42k 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 ...
user avatar
  • 145
2 votes
1 answer
948 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.
user avatar
  • 105