4 files changed, 28 insertions, 31 deletions
diff --git a/src/angular/svg-icon/svg-icon-label.component.html.ts b/src/angular/svg-icon/svg-icon-label.component.html.ts
index 558b7c4..7925739 100644
--- a/src/angular/svg-icon/svg-icon-label.component.html.ts
+++ b/src/angular/svg-icon/svg-icon-label.component.html.ts
@@ -1,4 +1,4 @@
-export default `
+export const template = `
 <div class="svg-icon-wrapper" [ngClass]="[(mode) ? 'mode-'+mode : '', (size) ? 'size-'+size : '', (labelPlacement) ? 'label-placement-'+labelPlacement : '', (clickable) ? 'clickable' : '', className || '']" [attr.disabled]="disabled || undefined">
     <svg-icon [name]="name" className="svg-icon"></svg-icon>
     <span class="svg-icon-label" [ngClass]="[labelClassName || '']">{{ label }}</span>
diff --git a/src/angular/svg-icon/svg-icon-label.component.ts b/src/angular/svg-icon/svg-icon-label.component.ts
index 5a00c3d..c4cdae1 100644
--- a/src/angular/svg-icon/svg-icon-label.component.ts
+++ b/src/angular/svg-icon/svg-icon-label.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input } from "@angular/core";
 import { SvgIconComponent } from './svg-icon.component';
-import { Mode, Size, Placement } from "../common/enums";
+import { Placement } from "../common/enums";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
-import template from './svg-icon-label.component.html';
+import { template } from './svg-icon-label.component.html';
 
 @Component({
     selector: 'svg-icon-label',
diff --git a/src/angular/svg-icon/svg-icon.component.html.ts b/src/angular/svg-icon/svg-icon.component.html.ts
index 1baedbd..a991ed3 100644
--- a/src/angular/svg-icon/svg-icon.component.html.ts
+++ b/src/angular/svg-icon/svg-icon.component.html.ts
@@ -1,3 +1,3 @@
-export default `
+export const template = `
 <div [ngClass]="classes" [attr.disabled]="disabled || undefined" [innerHtml]="svgIconContentSafeHtml"></div>
 `;
diff --git a/src/angular/svg-icon/svg-icon.component.ts b/src/angular/svg-icon/svg-icon.component.ts
index d53981d..f41b206 100644
--- a/src/angular/svg-icon/svg-icon.component.ts
+++ b/src/angular/svg-icon/svg-icon.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input, OnChanges, SimpleChanges, HostBinding } from "@angular/core";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
-import { Mode, Size } from "../common/enums";
-import iconsMap from '../../common/icons-map';
-import template from './svg-icon.component.html';
+import { Mode, Size, BackgroundShape, BackgroundColor } from "../common/enums";
+import { iconsMap } from 'onap-ui-common';
+import { template } from './svg-icon.component.html';
 
 @Component({
     selector: 'svg-icon',
@@ -16,35 +16,37 @@ import template from './svg-icon.component.html';
 export class SvgIconComponent implements OnChanges {
 
     @Input() public name: string;
+    @Input() public category: string;
     @Input() public mode: Mode;
     @Input() public size: Size;
+    @Input() public backgroundShape: BackgroundShape;
+    @Input() public backgroundColor: BackgroundColor;
     @Input() public disabled: boolean;
     @Input() public clickable: boolean;
     @Input() public className: any;
-
+    
     public svgIconContent: string;
     public svgIconContentSafeHtml: SafeHtml;
     public svgIconCustomClassName: string;
-    private classes: string;
+    public classes: string;
 
     constructor(protected domSanitizer: DomSanitizer) {
         this.size = Size.medium;
         this.disabled = false;
+        this.category = this.category || "common";
     }
 
-    static get Icons(): {[key: string]: string} {
+    static Icons(): { [key: string]: string } {
         return iconsMap;
     }
 
     public ngOnChanges(changes: SimpleChanges) {
-        if (changes.name) {
-            this.updateSvgIconByName();
-            this.buildClasses();
-        }
+        this.updateSvgIconByName();
+        this.buildClasses();
     }
 
     protected updateSvgIconByName() {
-        this.svgIconContent = SvgIconComponent.Icons[this.name] || null;
+        this.svgIconContent = iconsMap[this.category][this.name] || null;    
         if (this.svgIconContent) {
             this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.svgIconContent);
             this.svgIconCustomClassName = '__' + this.name.replace(/\s+/g, '_');
@@ -55,22 +57,17 @@ export class SvgIconComponent implements OnChanges {
     }
 
     private buildClasses = (): void => {
-        const _classes = [];
-        _classes.push('svg-icon');
-        if (this.mode) {
-            _classes.push('mode-' + this.mode);
-        }
-        if (this.size) {
-            _classes.push('size-' + this.size);
-        }
-        if (this.clickable) {
-            _classes.push('clickable');
-        }
-        if (this.svgIconCustomClassName) {
-            _classes.push(this.svgIconCustomClassName);
-        }
-        if (this.className) {
-            _classes.push(this.className);
+        const _classes = ['svg-icon'];
+        if (this.mode) { _classes.push('mode-' + this.mode); }
+        if (this.size) { _classes.push('size-' + this.size); }
+        if (this.clickable) { _classes.push('clickable'); }
+        if (this.svgIconCustomClassName) { _classes.push(this.svgIconCustomClassName); }
+        if (this.className) { _classes.push(this.className); }
+        if (this.backgroundShape) { _classes.push('bg-type-' + this.backgroundShape); }
+        if (this.backgroundShape && this.backgroundColor) {
+            _classes.push('bg-color-' + this.backgroundColor);
+        } else if (this.backgroundShape && !this.backgroundColor) {
+            _classes.push('bg-color-primary');
         }
         this.classes = _classes.join(" ");
     }