3

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 used instead.

This is the code I'm using:

<aura:component >
    <ltng:require styles="{!$Resource.SLDS + '/assets/styles/salesforce-lightning-design-system.min.css'}"/>
    <lightning:icon iconName="utility:add" size="large" alternativeText="sss"/>
    <lightning:button variant="brand" label="Download" iconName="utility:add" iconPosition="left" onclick="{! c.handleClick }" />
</aura:component>
4
  • We do not see your code. – Simonp Jan 22 '17 at 10:08
  • 1
    The code is there, it is just a formatting issue, which I corrected in a suggested edit. As soon as my edit has been approved, the code will be visible. – Markus Slabina Jan 22 '17 at 10:15
  • <ltng:require styles="{!$Resource.SLDS + '/assets/styles/salesforce-lightning-design-system.min.css'}"/>: This part is not required anymore. It is defaulty loaded by SF in your lightning component. – Simonp Jan 22 '17 at 10:50
  • There may be styling issue. I have seen that problem in my project, too. When I investigate, I see that there is an icon but its color white as in background. So it is invisible. When I change style by adding fill: #223344 icon has been visible. – efirat Jan 19 '18 at 14:10
4

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:

<aura:application extends="force:slds">
   <lightning:icon iconName="utility:add" size="large" alternativeText="sss"/>
</aura>

If the component runs inside LEX/SF1, it will work fine.

3
<aura:component >
    <lightning:icon iconName="utility:add" size="large" alternativeText="sss"/>
    <lightning:button variant="brand" label="Download" iconName="utility:add" iconPosition="left" onclick="{! c.handleClick }" />
</aura:component>

This works perfectly without:

<ltng:require styles="{!$Resource.SLDS + '/assets/styles/salesforce-lightning-design-system.min.css'}"/>

The slds is loaded by default. I think there was a conflict about icons.

1
  • When I am not using <ltng:require ..... >, the button is displayed without any styles in it. Full page button with the same error: Unknown token "lightning.utilitySprite" default value was used instead. – Dilip Singh Jan 23 '17 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.