44
votes
Accepted
Lightning : Icon color is not changing using the fill CSS
Actually the issue is which element you are applying the "fill" property to. Meaning when you declare something like <lightning:icon class="icn" iconName="utility:favorite&...
- 2,209
25
votes
SLDS icon not appearing in visualforce page
You don't need to add lightning css as static resource. Just include this tag on top of your VF page: <apex:slds />.
Pass the icon reference directly as shown below:
/apexpages/slds/latest/...
- 3,583
13
votes
Accepted
What is the path to Lightning SVG icons in a sandbox?
There are two locations, one for Lightning, and one for Visualforce.
Lightning
Replace the /assets/ of any URL in the Lightning Design System with /_slds/. Example:
/_slds/icons/utility-sprite/svg/...
- 502k
12
votes
Accepted
How to use slds illustration?
I was wondering about it this weekend and I found out that you can simply use an image tag that points to a SVG file like this:
<div class="slds-illustration slds-illustration_large" aria-...
- 4,459
7
votes
Lightning : Icon color is not changing using the fill CSS
By checking/copying the selector and scoping it down to the lightning-icon + my CSS class as follows you should be able to change the filling of the Icon easily.
.THIS lightning-icon.some-indicator &...
- 20.3k
7
votes
Accepted
Dynamically Render Toast Message With Icon?
This isn't a Lightning problem, but a generic element namespace problem. You have to create the element in the correct "namespace" for this to work. Credit to this question for pointing out the ...
- 502k
7
votes
Accepted
Custom icons from static resource on <lightning:icon> not working
I had the same issue and ask in Trailblazer Community here.
I got the answer from Greg Rewis:
"You need to have an id on the <g> element of the SVG. Then, simply concatenate the name together ...
- 8,715
7
votes
Finding icon-names for Web Component lightning cards
In the salesforce lightning design system docs here
6
votes
Accepted
How to use progress ring with lightning component
You need to use custom rendering. This is not a complete example (it doesn't show any icons/variants), but this will get you started:
Component
<aura:component >
<aura:attribute name="...
- 502k
5
votes
SLDS icon not appearing in visualforce page
The current correct method to reference images and icons is to use the !URLFOR($Asset.SLDS, '…asset path…') method as shown in this Trailhead.
<span class="slds-icon_container slds-icon-standard-...
- 215
4
votes
Lightning design system - SVG disappears after rerender
Just set your apex:page attribute docType="html-5.0" and this will fix the rerender SVG bug
- 41
4
votes
Accepted
Don't understand the usage of <c:svgIcon> helper (Lightning Design System - Communities)
This is because "opportunity" icon belongs to standard set,
"moneybag" is a part of utility set, change "standard" to "utility".
"custom17" belongs to custom icons category.
The easiest way to ...
- 538
4
votes
Accepted
Does Salesforce Locker Service has full support for svg?
Locker should provide full access to the SVG APIs but it looks like it's missing some (e.g. SVGPathElement). There are no open cases/bugs on this currently however. If you open a support case and ...
- 10.1k
4
votes
Accepted
Lightning Design System SVG Path Issues
for icons I would recommend using standard salesforce provided components instead:
<lightning:icon iconName="utility:right"/>
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/...
4
votes
Accepted
lightning:icon not lightning:button with iconName attribute is not displaying
If you are running the component in a standalone app(i.e customAppName.app), then you need to add extends="force:slds" to you custom aura:application only then the icon will be displayed.
Eg:
<...
- 10.1k
4
votes
Accepted
SVG Polygon Shape in Lightning Component using SLDS
If you want to use SVGs in Lightning, you currently have to "render" them directly. This can end up being fairly non-trivial, but if you absolutely want this effect, you can do so. Here's an example ...
- 502k
4
votes
Accepted
Lightning Icon Background color not changing
The .THIS.myClass, with the period attaching THIS and myClass tries to look for the root element and whether it has myClass associated with it. Assuming your icon is not the root element in the ...
- 5,242
4
votes
Accepted
LWC Lightning-icon color is not changing using fill Css
Because lightning-icon is an LWC, all its internals are protected within its own Shadow DOM. You cannot use CSS to impact its content directly. All you can do is use the properties specifically ...
- 38.1k
3
votes
Lightning Icons (SVG) not displaying in Lightning Out
The issue is exactly what Tony outlined above. Until this has been officially fixed by Salesforce, I suggest you move the SLDS folder to the location that's being referenced by the browser/server.
...
- 74
3
votes
Accepted
SVG Icon from Aura Bundle doesn't display in App Builder
Update below code in svg and verify.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/...
- 1,010
3
votes
lightning:icon not lightning:button with iconName attribute is not displaying
<aura:component >
<lightning:icon iconName="utility:add" size="large" alternativeText="sss"/>
<lightning:button variant="brand" label="Download" iconName="utility:add" ...
- 1,902
3
votes
Accepted
Icon color <svgIcon> helper component (Community Lightning)
Have you thought of using CSS?
If you have the ability to modify/append the CSS you could edit the CSS class for the "box" that contains the icon, then change icon color. For example:
.slds-icon-...
- 46
3
votes
Lightning : Icon color is not changing using the fill CSS
lightning-icon can inherit color from the container it's in using slds-current-color. Top answer likely won't work for out of the box components as there is a shadow root intervention. This should ...
- 49
3
votes
Accepted
Getting: Invalid component 'use' when trying to use SVG
Replace svg with lightning-icon.
<lightning-icon icon-name="standard:lead" alternative-text="Lead" title="Leade">
</lightning-icon>
Resource:
https://...
- 2,884
2
votes
Accepted
How to get SVG image coordinates in Lightning
You can not add onclick event on svg element in lightning but there is a way. You can wrap your svn inside a div and then add onclick event to that div.
Then you can bind onclick event with that div. ...
- 3,212
2
votes
Lightning design system - SVG disappears after rerender
I was able to overcome the problem of SVG images disappearing when their containing <apex:*> tag is re-rendered:
Add docType="html-5.0" attribute to the <apex:page> tag;
Put the xmlns="......
2
votes
SVG Icon not displaying in IE11
The script that should be included is the svg4everybody.legacy.js one.
Mine was like so :
<apex:includeScript value="{!URLFOR($Resource.svg4everybody, 'svg4everybody.legacy.js')}"/>
You ...
- 1,215
2
votes
Accepted
svgIcon doesn't work, url throws 404
The new, preferred method is to use lightning:icon or lightning:buttonIcon. If you insist on using svgIcon, make sure you have the right resource path. Static resources are available in Lightning, but ...
- 502k
2
votes
How to use progress ring with lightning component
There is also a great LWC implementation on Github here:
https://github.com/texei/progress-ring
- 38.2k
2
votes
Accepted
Lightning button action in VF page
This is an HTML button and unfortunately, you can't call apex code using HTML buttons.
Now you have few options here.
As you are using custom CSS, you can set StandardStylesheet = false and add the ...
- 29.7k
Only top scored, non community-wiki answers of a minimum length are eligible