[ICONS] additional icons and demo refactoring

Signed-off-by: Shijir Tsogoo <[email protected]>

src/clarity/iconography/demo/icon-selection.demo.html

@@ -1,220 +1,7 @@
 <div class="clr-icon-selection">
  <div class="row">
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="home"></clr-icon><span class="icon-shape-name">home</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="house"></clr-icon><span class="icon-shape-name">house</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="bars"></clr-icon><span class="icon-shape-name">bars</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="menu"></clr-icon><span class="icon-shape-name">menu</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="cog"></clr-icon><span class="icon-shape-name">cog</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="settings"></clr-icon><span class="icon-shape-name">settings</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="pencil"></clr-icon><span class="icon-shape-name">pencil</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="edit"></clr-icon><span class="icon-shape-name">edit</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="refresh"></clr-icon><span class="icon-shape-name">refresh</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="sync"></clr-icon><span class="icon-shape-name">sync</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="search"></clr-icon><span class="icon-shape-name">search</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="share"></clr-icon><span class="icon-shape-name">share</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="bell"></clr-icon><span class="icon-shape-name">bell</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="notification"></clr-icon><span class="icon-shape-name">notification</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="times"></clr-icon><span class="icon-shape-name">times</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="close"></clr-icon><span class="icon-shape-name">close</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="check"></clr-icon><span class="icon-shape-name">check</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="success"></clr-icon><span class="icon-shape-name">success</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="info-circle"></clr-icon><span class="icon-shape-name">info-circle</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="info"></clr-icon><span class="icon-shape-name">info</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="exclamation-triangle"></clr-icon><span class="icon-shape-name">exclamation-triangle</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="warning"></clr-icon><span class="icon-shape-name">warning</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="exclamation-circle"></clr-icon><span class="icon-shape-name">exclamation-circle</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="error"></clr-icon><span class="icon-shape-name">error</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="envelope"></clr-icon><span class="icon-shape-name">envelope</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="email"></clr-icon><span class="icon-shape-name">email</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="ban"></clr-icon><span class="icon-shape-name">ban</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="cancel"></clr-icon><span class="icon-shape-name">cancel</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="download"></clr-icon><span class="icon-shape-name">download</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="upload"></clr-icon><span class="icon-shape-name">upload</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="lock"></clr-icon><span class="icon-shape-name">lock</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="unlock"></clr-icon><span class="icon-shape-name">unlock</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="star"></clr-icon><span class="icon-shape-name">star</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="favorite"></clr-icon><span class="icon-shape-name">favorite</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="plus"></clr-icon><span class="icon-shape-name">plus</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="add"></clr-icon><span class="icon-shape-name">add</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="user"></clr-icon><span class="icon-shape-name">user</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="avatar"></clr-icon><span class="icon-shape-name">avatar</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="users"></clr-icon><span class="icon-shape-name">users</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="group"></clr-icon><span class="icon-shape-name">group</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="file"></clr-icon><span class="icon-shape-name">file</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="document"></clr-icon><span class="icon-shape-name">document</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="folder"></clr-icon><span class="icon-shape-name">folder</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="directory"></clr-icon><span class="icon-shape-name">directory</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="calendar"></clr-icon><span class="icon-shape-name">calendar</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="date"></clr-icon><span class="icon-shape-name">date</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="flag"></clr-icon><span class="icon-shape-name">flag</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="pop-out"></clr-icon><span class="icon-shape-name">pop-out</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="filter"></clr-icon><span class="icon-shape-name">filter</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="pin"></clr-icon><span class="icon-shape-name">pin</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="trash"></clr-icon><span class="icon-shape-name">trash</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="cloud"></clr-icon><span class="icon-shape-name">cloud</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="map-marker"></clr-icon><span class="icon-shape-name">map-marker</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="map"></clr-icon><span class="icon-shape-name">map</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="times-circle"></clr-icon><span class="icon-shape-name">times-circle</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="remove"></clr-icon><span class="icon-shape-name">remove</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="play"></clr-icon><span class="icon-shape-name">play</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="pause"></clr-icon><span class="icon-shape-name">pause</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="step-forward"></clr-icon><span class="icon-shape-name">step-forward</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="stop"></clr-icon><span class="icon-shape-name">stop</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="angle-double"></clr-icon><span class="icon-shape-name">angle-double</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="collapse"></clr-icon><span class="icon-shape-name">collapse</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="angle"></clr-icon><span class="icon-shape-name">angle</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="caret"></clr-icon><span class="icon-shape-name">caret</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="line-chart"></clr-icon><span class="icon-shape-name">line-chart</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="analytics"></clr-icon><span class="icon-shape-name">analytics</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="event"></clr-icon><span class="icon-shape-name">event</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="dashboard"></clr-icon><span class="icon-shape-name">dashboard</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="bookmark"></clr-icon><span class="icon-shape-name">bookmark</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="bar-chart"></clr-icon><span class="icon-shape-name">bar-chart</span>
- </div>
- <div class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="power"></clr-icon><span class="icon-shape-name">power</span>
- </div>
- <div class="clr-icon-item icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
- <clr-icon shape="tasks"></clr-icon><span class="icon-shape-name">tasks</span>
+ <div *ngFor="let shape of shapes" class="clr-icon-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
+ <clr-icon [attr.shape]="shape"></clr-icon><span class="icon-shape-name">{{shape}}</span>
  </div>
  </div>
-</div>
+</div>

src/clarity/iconography/demo/icon-selection.ts

@@ -3,7 +3,13 @@
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-import {Component} from "@angular/core";
+import { Component } from "@angular/core";
+import { SVG_ICON_TEMPLATES } from "../../../icons/svg-icon-templates";
+
+let iconShapes = Object.keys(SVG_ICON_TEMPLATES);
+let deprecatedIconShapes = ["dashboard-gauge"];
+iconShapes = iconShapes.filter(shape => deprecatedIconShapes.indexOf(shape) === -1);
+
 
 @Component({
  selector: "clr-icon-selection-demo",
@@ -12,4 +18,7 @@ import {Component} from "@angular/core";
  templateUrl: "./icon-selection.demo.html"
 })
 export class IconSelectionDemo {
+
+ shapes: string[] = iconShapes;
+
 }

src/icons/define-clarity-icons.ts

@@ -3,7 +3,8 @@
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-import {SVG_ICON_TEMPLATES} from "./svg-icon-templates";
+import { SVG_ICON_TEMPLATES } from "./svg-icon-templates";
+import { SVG_IMG_ICON_TEMPLATES } from "./svg-img-icon-templates";
 
 let parentConstructor = function () {
  return HTMLElement.apply(this, arguments);
@@ -33,7 +34,13 @@ let generateIcon = function (element: any, shape: string) {
 
  if (shape !== element._shape) {
  element._shape = shape;
- element.innerHTML = SVG_ICON_TEMPLATES[element._shape] || SVG_ICON_TEMPLATES["error"];
+ element.innerHTML =
+ SVG_ICON_TEMPLATES[element._shape] ||
+ SVG_IMG_ICON_TEMPLATES[element._shape] ||
+ (function () {
+ console.error("Error: '" + shape + "' is not found in the Clarity Icon set.");
+ return SVG_ICON_TEMPLATES["error"];
+ }());
  }
 };
 let setIconSize = function (element: any, size: string) {