Questions tagged [svg-icon]
The svg-icon tag has no usage guidance.
59
questions
0
votes
1
answer
120
views
I have to insert an img using svg in 1column of datatable based on conditional rendering. How to have svg img in html from JS
I want to have SVG image in one column of data table along with it's data. Can't make any changes to HTML, so can't use IMG tag.
I have SVG file as static resource.
here's the code of HTML and JS
HTML-...
- 54
1
vote
1
answer
102
views
I want to change the color of my utility icon on lwc. No option to add class on its tag: lightning-icon
I have added the utility icon to my table based on condition i.e. dynamically and it's working fine but I want to change its color too which doesn't seem to work for me. If anyone could help. I tried ...
- 54
0
votes
1
answer
141
views
Lightning Page Header Icons missing background color
Below is the code for the Header on my LWC page. I am trying to reference the Standard channel_program_members icon. After a lot of tinkering I got it to display however the background color is ...
- 373
1
vote
1
answer
1k
views
Getting: Invalid component 'use' when trying to use SVG
Im trying to follow the split view examples in https://www.lightningdesignsystem.com/components/split-view/
but i cannot save the component.
I'm getting an Invalid component 'use' for every svg ...
- 13
0
votes
1
answer
1k
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
....
- 29
6
votes
0
answers
36
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 ...
- 61
0
votes
2
answers
1k
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.
...
1
vote
1
answer
229
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 ...
- 135k
-3
votes
1
answer
55
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="...
- 451
1
vote
0
answers
318
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 ...
- 4,185
1
vote
2
answers
172
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
1
answer
682
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="...
- 331
1
vote
1
answer
451
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="...
- 1,035
0
votes
1
answer
1k
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 ...
- 3
0
votes
0
answers
293
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" ...
- 2,600
0
votes
2
answers
7k
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
1
answer
428
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
<...
- 1,366
0
votes
1
answer
1k
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:
...
- 3
1
vote
1
answer
365
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 ...
- 1,765
5
votes
2
answers
6k
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 ...
- 3,984
1
vote
1
answer
1k
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,439
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
...
- 95
0
votes
0
answers
610
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 ...
- 1,291
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="...
- 1,265
0
votes
1
answer
3k
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 ...
- 1
0
votes
1
answer
831
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 ...
- 1,366
1
vote
1
answer
4k
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>
...
- 1,078
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}">
<...
- 29
1
vote
2
answers
805
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&...
- 426
1
vote
1
answer
981
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?
- 321
9
votes
2
answers
5k
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 ...
- 1,282
7
votes
2
answers
12k
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,099
1
vote
1
answer
2k
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 ...
- 13
2
votes
1
answer
4k
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 ...
- 2,940
5
votes
3
answers
2k
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 ...
- 193
0
votes
1
answer
380
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 ...
- 775
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 ...
- 445
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 ...
- 149k
0
votes
1
answer
391
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 ...
- 5,900
0
votes
1
answer
456
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....
- 3
2
votes
2
answers
619
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" ...
- 37.3k
11
votes
3
answers
17k
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" ...
- 395
3
votes
2
answers
20k
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 ...
- 33
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 ...
- 5,900
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?
- 491
1
vote
1
answer
194
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" ...
- 656
1
vote
1
answer
673
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:...
- 97
5
votes
1
answer
141
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 ...
1
vote
2
answers
2k
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 ...
- 117
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 ...
- 13.6k