Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [svg-icon]

The tag has no usage guidance.

0
votes
1answer
62 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
179 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
0answers
33 views

Is it possible to use a custom SVG as icon for lightning card view component

Is it possible to use a custom SVG icon in a lightning card component: <lightning:card title="My card" iconName="custom_svg_here"> I have set a custom SVG icon for the custom lightning ...
0
votes
1answer
48 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
91 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
94 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
151 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
203 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?
8
votes
1answer
884 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 ...
5
votes
1answer
2k 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 ...
0
votes
1answer
180 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
651 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 ...
4
votes
3answers
367 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
210 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 ...
3
votes
1answer
1k 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
1k 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
246 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
187 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
395 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" ...
5
votes
3answers
7k 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
10k 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
1k 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
1k 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
134 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
217 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
113 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
919 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
745 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 ...
2
votes
2answers
711 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
397 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 ...
7
votes
3answers
14k 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 suing the CSS. I am not able to do it. It always overrides with the Salesforce ...
2
votes
1answer
579 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
2answers
1k 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
616 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 ...
4
votes
1answer
790 views

Are SLDS icons available natively in LEX?

According to this page on the Lightning Design System, the unmanaged package has been deprecated due to SLDS being available in Salesforce without need for a static resource. However, I'm having ...
2
votes
1answer
323 views

Lightning Component innerHTML fails without any error

I've been using the SVG component from the related Trailhead Module, and it doesn't display the icon with LockerService activated. I understand from this question that innerHTML is read only, thus ...
6
votes
2answers
2k views

How can we use custom SVG icons in Lightning Component with LockerService enabled?

I'm trying to use a custom SVG icon in a Lightning Component (not part of SLDS pre defined icons). I've put the SVG icon in following manner: MyTestApp.cmp <aura:component > <div aura:...