<!DOCTYPE html>
<html>
<head>
<title> Angular 2 Icons – Salesforce - Example </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.lightningdesignsystem.com/assets/styles/slds.css">
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2@2.0.0-beta.15/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://npmcdn.com/typescript@^1.8.10/lib/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
<script src="https://npmcdn.com/ng-lightning@0.7.0/ng-lightning.bundle.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}},
paths: {
'tether': 'https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.js'
},
});
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<body>
<h1 style="height:50px; padding : 10px; font-size: 19px">
Angular 2 Icons – Salesforce - Example
</h1>
<a target="_blank" href="http://www.angulartypescript.com/angular-2-tutorial/" title="Angular 2 Tutorial">
<img src="http://www.angulartypescript.com/wp-content/uploads/2016/03/learn-more-angular-2.png" alt="Smiley face" height="200" width="500">
</a>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/
-->
/* Styles go here */
/**
* Created by Tareq Boulakjar. from angulartypescript.com
*/
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) % this.icons.length];
}
}
bootstrap(Angular2Icons, [provideNglConfig()]);
/*
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/
*/
<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>