Dynamic Icon loading in LWC doesn't workSVG API incomplete in LWC/LockerCan't get refreshApex() to work in lwcAccess svg icon from static resource zip fileLWC NavigationMixin does not work in CommunityLWC: How to create dynamic component in LWC?Design tokens doesn't work in LWC?Why data- attribute sometimes doesn't work?LWC design attributes doesn't work in the Community with Anonymous UserLWC: Iterate through a dynamic query resultLWC - Replace Lightning-input of type file with a icon
when to use "wait" and when "busy" mouse cursor
Just how much information should you share with a former client?
How did astronauts using rovers tell direction without compasses on the Moon?
Would people understand me speaking German all over Europe?
Complaints from (junior) developers against solution architects: how can we show the benefits of our work and improve relationships?
What are the closest international airports in different countries?
Why are subdominants unstable?
Why are we moving in circles with a tandem kayak?
Should I intervene when a colleague in a different department makes students run laps as part of their grade?
Was the Psych theme song written for the show?
Is it possible to tell if a child will turn into a Hag?
How can I convert a linear narrative into a branching narrative?
My employer is refusing to give me the pay that was advertised after an internal job move
How would a lunar colony attack Earth?
Find all the numbers in one file that are not in another file in python
What language is Raven using for her attack in the new 52?
When encrypting twice with two separate keys, can a single key decrypt both steps?
Is it possible for a particle to decay via gravity?
Solve equation using Mathematica
May a hotel provide accommodation for fewer people than booked?
When does the Homunculus die, exactly?
What is a good example for artistic ND filter applications?
Should I put my name first, or last in the team members list
Why did I lose on time with 3 pawns vs Knight. Shouldn't it be a draw?
Dynamic Icon loading in LWC doesn't work
SVG API incomplete in LWC/LockerCan't get refreshApex() to work in lwcAccess svg icon from static resource zip fileLWC NavigationMixin does not work in CommunityLWC: How to create dynamic component in LWC?Design tokens doesn't work in LWC?Why data- attribute sometimes doesn't work?LWC design attributes doesn't work in the Community with Anonymous UserLWC: Iterate through a dynamic query resultLWC - Replace Lightning-input of type file with a icon
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I am using the progress-ring LWC component from https://github.com/texei/progress-ring and fail to make the SLDS SVG Icon displayed dynamic work:
Usage:
<c-progress-ring ... icon="symbols.svg#warning"></c-progress-ring>
HTML:
<template if:true=icon>
<span class="slds-icon_container slds-icon-utility" title=state>
<svg class="slds-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/icon"></use>
</svg>
<span class="slds-assistive-text">state</span>
</span>
</template>
JS:
import LightningElement, api, track from "lwc";
export default class ProgressRing extends LightningElement
@api min;
@api max;
@api icon;
...
lightning-web-components svg public-reactive-properties
asked 9 hours ago
Robert SösemannRobert Sösemann
14.2k12 gold badges84 silver badges243 bronze badges
add a comment |
I am using the progress-ring LWC component from https://github.com/texei/progress-ring and fail to make the SLDS SVG Icon displayed dynamic work:
Usage:
<c-progress-ring ... icon="symbols.svg#warning"></c-progress-ring>
HTML:
<template if:true=icon>
<span class="slds-icon_container slds-icon-utility" title=state>
<svg class="slds-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/icon"></use>
</svg>
<span class="slds-assistive-text">state</span>
</span>
</template>
JS:
import LightningElement, api, track from "lwc";
export default class ProgressRing extends LightningElement
@api min;
@api max;
@api icon;
...
lightning-web-components svg public-reactive-properties
asked 9 hours ago
Robert SösemannRobert Sösemann
14.2k12 gold badges84 silver badges243 bronze badges
2
Thanks for the contribution of my component :)
– FabienHuot
8 hours ago
add a comment |
I am using the progress-ring LWC component from https://github.com/texei/progress-ring and fail to make the SLDS SVG Icon displayed dynamic work:
Usage:
<c-progress-ring ... icon="symbols.svg#warning"></c-progress-ring>
HTML:
<template if:true=icon>
<span class="slds-icon_container slds-icon-utility" title=state>
<svg class="slds-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/icon"></use>
</svg>
<span class="slds-assistive-text">state</span>
</span>
</template>
JS:
import LightningElement, api, track from "lwc";
export default class ProgressRing extends LightningElement
@api min;
@api max;
@api icon;
...
lightning-web-components svg public-reactive-properties
asked 9 hours ago
Robert SösemannRobert Sösemann
14.2k12 gold badges84 silver badges243 bronze badges
I am using the progress-ring LWC component from https://github.com/texei/progress-ring and fail to make the SLDS SVG Icon displayed dynamic work:
Usage:
<c-progress-ring ... icon="symbols.svg#warning"></c-progress-ring>
HTML:
<template if:true=icon>
<span class="slds-icon_container slds-icon-utility" title=state>
<svg class="slds-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/icon"></use>
</svg>
<span class="slds-assistive-text">state</span>
</span>
</template>
JS:
import LightningElement, api, track from "lwc";
export default class ProgressRing extends LightningElement
@api min;
@api max;
@api icon;
...
lightning-web-components svg public-reactive-properties
lightning-web-components svg public-reactive-properties
asked 9 hours ago
Robert SösemannRobert Sösemann
14.2k12 gold badges84 silver badges243 bronze badges
asked 9 hours ago
Robert SösemannRobert Sösemann
14.2k12 gold badges84 silver badges243 bronze badges
asked 9 hours ago
Robert SösemannRobert Sösemann
14.2k12 gold badges84 silver badges243 bronze badges
asked 9 hours ago
Robert SösemannRobert Sösemann
14.2k12 gold badges84 silver badges243 bronze badges
asked 9 hours ago
Robert SösemannRobert Sösemann
14.2k12 gold badges84 silver badges243 bronze badges
14.2k12 gold badges84 silver badges243 bronze badges
2
Thanks for the contribution of my component :)
– FabienHuot
8 hours ago
add a comment |
2
Thanks for the contribution of my component :)
– FabienHuot
8 hours ago
2
2
Thanks for the contribution of my component :)
– FabienHuot
8 hours ago
Thanks for the contribution of my component :)
– FabienHuot
8 hours ago
add a comment |
2 Answers
2
active
oldest
votes
You can make it work using the <lighting-icon> tag.
<template if:true=icon>
<lightning-icon icon-name=iconName size="x-small" ></lightning-icon>
</template>
answered 9 hours ago
dennisjskdennisjsk
1363 bronze badges
New contributor
dennisjsk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Have you tried using the <lightning-icon> tag? Documentation can be found here.
For your code, the HTML should look something like this: (you should modify the component call a little bit, so your text for "icon" satisfies the specification (i.e. "action:approval")
<template if:true=icon>
<lightning-icon icon-name=icon alternative-text=state</lightning-icon>
</template>
answered 9 hours ago
J. LietzauJ. Lietzau
2551 silver badge12 bronze badges
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "459"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f271795%2fdynamic-icon-loading-in-lwc-doesnt-work%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can make it work using the <lighting-icon> tag.
<template if:true=icon>
<lightning-icon icon-name=iconName size="x-small" ></lightning-icon>
</template>
answered 9 hours ago
dennisjskdennisjsk
1363 bronze badges
New contributor
dennisjsk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
You can make it work using the <lighting-icon> tag.
<template if:true=icon>
<lightning-icon icon-name=iconName size="x-small" ></lightning-icon>
</template>
answered 9 hours ago
dennisjskdennisjsk
1363 bronze badges
New contributor
dennisjsk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
You can make it work using the <lighting-icon> tag.
<template if:true=icon>
<lightning-icon icon-name=iconName size="x-small" ></lightning-icon>
</template>
answered 9 hours ago
dennisjskdennisjsk
1363 bronze badges
New contributor
dennisjsk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You can make it work using the <lighting-icon> tag.
<template if:true=icon>
<lightning-icon icon-name=iconName size="x-small" ></lightning-icon>
</template>
answered 9 hours ago
dennisjskdennisjsk
1363 bronze badges
New contributor
dennisjsk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 9 hours ago
dennisjskdennisjsk
1363 bronze badges
New contributor
dennisjsk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 9 hours ago
dennisjskdennisjsk
1363 bronze badges
answered 9 hours ago
dennisjskdennisjsk
1363 bronze badges
1363 bronze badges
New contributor
dennisjsk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
dennisjsk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
Have you tried using the <lightning-icon> tag? Documentation can be found here.
For your code, the HTML should look something like this: (you should modify the component call a little bit, so your text for "icon" satisfies the specification (i.e. "action:approval")
<template if:true=icon>
<lightning-icon icon-name=icon alternative-text=state</lightning-icon>
</template>
answered 9 hours ago
J. LietzauJ. Lietzau
2551 silver badge12 bronze badges
add a comment |
Have you tried using the <lightning-icon> tag? Documentation can be found here.
For your code, the HTML should look something like this: (you should modify the component call a little bit, so your text for "icon" satisfies the specification (i.e. "action:approval")
<template if:true=icon>
<lightning-icon icon-name=icon alternative-text=state</lightning-icon>
</template>
answered 9 hours ago
J. LietzauJ. Lietzau
2551 silver badge12 bronze badges
add a comment |
Have you tried using the <lightning-icon> tag? Documentation can be found here.
For your code, the HTML should look something like this: (you should modify the component call a little bit, so your text for "icon" satisfies the specification (i.e. "action:approval")
<template if:true=icon>
<lightning-icon icon-name=icon alternative-text=state</lightning-icon>
</template>
answered 9 hours ago
J. LietzauJ. Lietzau
2551 silver badge12 bronze badges
Have you tried using the <lightning-icon> tag? Documentation can be found here.
For your code, the HTML should look something like this: (you should modify the component call a little bit, so your text for "icon" satisfies the specification (i.e. "action:approval")
<template if:true=icon>
<lightning-icon icon-name=icon alternative-text=state</lightning-icon>
</template>
answered 9 hours ago
J. LietzauJ. Lietzau
2551 silver badge12 bronze badges
answered 9 hours ago
J. LietzauJ. Lietzau
2551 silver badge12 bronze badges
answered 9 hours ago
J. LietzauJ. Lietzau
2551 silver badge12 bronze badges
answered 9 hours ago
J. LietzauJ. Lietzau
2551 silver badge12 bronze badges
2551 silver badge12 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Salesforce Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f271795%2fdynamic-icon-loading-in-lwc-doesnt-work%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Thanks for the contribution of my component :)
– FabienHuot
8 hours ago