penambahan list icon

src/app/content/hemat-app/component/select-icon/select-icon.component.css

@@ -0,0 +1,4 @@
+:host ::ng-deep .ng-select .ng-select-container {
+  color: #ffffff !important;
+  background-color: #252525 !important;
+}

src/app/content/hemat-app/component/select-icon/select-icon.component.html

@@ -0,0 +1,11 @@
+<ng-select
+  [items]="icons"
+  bindLabel="name"
+  (change)="onSelect($event)"
+  bindValue="icon"
+  placeholder="Select an icon"
+>
+  <ng-template ng-option-tmp let-item="item">
+    <i [ngClass]="item.icon"></i> {{ item.name }}
+  </ng-template>
+</ng-select>

src/app/content/hemat-app/component/select-icon/select-icon.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectIconComponent } from './select-icon.component';
+
+describe('SelectIconComponent', () => {
+  let component: SelectIconComponent;
+  let fixture: ComponentFixture<SelectIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SelectIconComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SelectIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/component/select-icon/select-icon.component.ts

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+import { MasterService } from "../../service/master-api.service";
+interface Icon {
+  name: string;
+  icon: string;
+}
+@Component({
+  selector: "app-select-icon",
+  templateUrl: "./select-icon.component.html",
+  styleUrls: ["./select-icon.component.css"],
+})
+export class SelectIconComponent {
+  @Output() iconSelected: EventEmitter<string> = new EventEmitter<string>();
+  icons: any[] = [];
+  constructor(private masterService: MasterService) {}
+  ngOnInit(): void {
+    this.masterService.getIconData().subscribe((res) => {
+      this.icons = res.rows;
+    });
+  }
+
+  onSelect(icon: Icon): void {
+    this.iconSelected.emit(icon.icon);
+  }
+}

src/app/content/hemat-app/component/select-icon/select-icon.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { SelectIconComponent } from "./select-icon.component";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { NgSelectModule } from "@ng-select/ng-select";
+import { FormsModule } from "@angular/forms";
+
+@NgModule({
+  declarations: [SelectIconComponent],
+  imports: [CommonModule, NgbModule, NgSelectModule, FormsModule],
+  exports: [
+    SelectIconComponent
+  ]
+})
+export class SelectIconModule {}