Angular 2 Icons – Salesforce

Angular 2 Icons from Salesforce you can use an icon to provide a visual context.

angular 2 icons
angular 2 icons

You can use angular 2 icons to enhance the user experience.

Angular 2 Icons developed using The Lightning Design System CSS Framework.

Angular 2 Icon is a native Angular 2 directive (component) developed with typescript.

If you want to setup the environment read this article.

 

Try Online Example at the end of article: try-it-angular-2

 

HTML File:


<div style="padding-left:10px;padding-top:10px">

<div class="slds-grid">
<div class="slds-col">
<div class="slds-text-heading--label slds-m-bottom--x-small">Angular 2 icons Utility</div>
<ngl-icon icon="connected_apps"></ngl-icon>
<ngl-icon icon="warning" type="warning" alt="Warning"></ngl-icon>
<ngl-icon icon="close" type="error"></ngl-icon>
</div>
<div class="slds-col">
<div class="slds-text-heading--label slds-m-bottom--x-small">Angular 2 iconsStandard</div>
<ngl-icon icon="answer_public" category="standard"></ngl-icon>
<ngl-icon icon="investment_account" category="standard" type="default"></ngl-icon>
<ngl-icon icon="avatar" category="standard"></ngl-icon>
</div>
</div>
<div class="slds-grid slds-m-top--large">
<div class="slds-col">
<div class="slds-text-heading--label slds-m-bottom--x-small">Angular 2 icons Doctype</div>
<ngl-icon icon="image" category="doctype" size="large"></ngl-icon>
<ngl-icon icon="link" category="doctype"></ngl-icon>
<ngl-icon icon="html" category="doctype" size="small"></ngl-icon>
</div>
<div class="slds-col">
<div class="slds-text-heading--label slds-m-bottom--x-small">Angular 2 icons Action</div>
<ngl-icon icon="web_link" category="action" class="slds-icon_container--circle"></ngl-icon>
<ngl-icon icon="download" category="action" size="large" svgClass="slds-p-around--x-small"></ngl-icon>
</div>
</div>
<div class="slds-grid slds-m-top--large">
<div class="slds-col">
<div class="slds-text-heading--label slds-m-bottom--x-small">Angular 2 iconsCustom</div>
<ngl-icon icon="1" category="custom"></ngl-icon>
<ngl-icon icon="10" category="custom"></ngl-icon>
<ngl-icon icon="13" category="custom"></ngl-icon>
<ngl-icon icon="14" category="custom"></ngl-icon>
</div>
</div>

<div class="slds-grid slds-m-top--large" style="height: 50px;">
<div class="slds-align-middle slds-col">
<button type="button" nglButton="neutral" (click)="change()">Change</button>
<ngl-icon [icon]="icon.icon" [size]="icon.size" [category]="icon.category"></ngl-icon>
</div>
</div>


</div>

TypeScrip File :


import {bootstrap}  from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {NGL_DIRECTIVES, provideNglConfig} from 'ng-lightning/ng-lightning';

@Component({
selector: 'my-app',
directives: [NGL_DIRECTIVES],
templateUrl: 'app/angular-2-icons.html'
})
export class Angular2Icons {
icons = [
{ icon: 'announcement' },
{ category: 'standard', icon: 'case_comment', size: 'large' },
{ category: 'custom', icon: '2', size: 'large' },
];

icon = this.icons[0];

change() {
this.icon = this.icons[(this.icons.indexOf(this.icon) + 1) {28eefed8cb8bfa9e2bbcfc2b6e9ab5ce72afab532b878349fead02da0ca94fca} this.icons.length];
}
}

bootstrap(Angular2Icons, [provideNglConfig()]);

 

API Documentation:


<ngl-icon>

Input


icon: You can find the values on the icon page.

type?: 'default' | 'warning' | 'error' = 'default':  Icon's color.

size: 'x-small' | 'small' | 'large': Icon's size.

svgClass: string | string[] = '': Extra class(es) you want to apply to SVG element.

alt: string: Assistive text.


Attribute


button? boolean: Whether it lives inside a button, in order to apply the appropriate styles. If not explicitly set, it will try to determine it based on the parent directives, nglButton or nglButtonIcon.

all files from here : ng-lightning

angular 2 icons