@salesforce-ux/slds-icon

Getting Started

About

The icon component for the Salesforce Lightning Design System.

Installation

npm i @salesforce-ux/slds-icon

Usage

Lightning Web Component

Import the CSS

After installation, you need to import the component's CSS into your LWC component module. To do this, use the @import CSS syntax within the CSS file of your component module.

/* myComponent.css */
@import '@salesforce-ux/slds-icon/dist/icon.compiled.css';

The *.compiled.css files in the /dist folder have all the component's dependencies rolled up into one file. If you choose to import your modules explicitly, you should the *.css files in the /dist folder.

Decorate the HTML to match specification

You will need to decorate the HTML of your LWC component template to have all the named part attributes in the component's specification.

Add the component's attributes that are relevant to the component's styling to the host custom element. Reference the component's CSS to see which styling is dependent on a host element attribute..