1 files changed, 32 insertions, 2 deletions

diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
index b6f63584be..f5d9e88934 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
@@ -1,6 +1,8 @@
 import {Component, Input, Output, Inject, EventEmitter} from '@angular/core';
 import {Component as ComponentModel} from 'app/models';
 import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
+import {ElementIcon} from "../sdc-element-icon/sdc-element-icon.component";
+import {ComponentType, ResourceType, SdcElementType} from "../../../../utils/constants";
 
 @Component({
     selector: 'ui-tile',
@@ -10,14 +12,42 @@ import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
 export class TileComponent {
     @Input() public component: ComponentModel;
     @Output() public onTileClick: EventEmitter<ComponentModel>;
-
+    public catalogIcon: ElementIcon;
     public hasEllipsis: boolean;
 
-    constructor(@Inject(SdcMenuToken) public sdcMenu:IAppMenu) {
+    constructor(@Inject(SdcMenuToken) public sdcMenu: IAppMenu) {
         this.onTileClick = new EventEmitter<ComponentModel>();
         this.hasEllipsis = false;
     }
 
+    ngOnInit(): void {
+        switch (this.component.componentType) {
+
+            case ComponentType.SERVICE:
+                if (this.component.icon === 'defaulticon') {
+                    this.catalogIcon = new ElementIcon(this.component.icon, "services_60", 'lightBlue', 'white');
+                } else {
+                    this.catalogIcon = new ElementIcon(this.component.icon, "services_60", '', 'lightBlue');
+                }
+                break;
+            case ComponentType.RESOURCE:
+                switch (this.component.getComponentSubType()) {
+                    case ResourceType.CP:
+                    case ResourceType.VL:
+                        this.catalogIcon = new ElementIcon(this.component.icon, "resources_24", "purple", "white", "circle", 'medium');
+                        break;
+                    default:
+                        if (this.component.icon === 'defaulticon') {
+                            this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", "purple", "white", "circle", 'x_large');
+                        } else {
+                            this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", '', "error");
+                        }
+
+                }
+
+        }
+    }
+
     public tileClicked() {
         this.onTileClick.emit(this.component);
     }