penambahan list icon

package-lock.json

@@ -77,6 +77,7 @@
         "quill": "^1.3.7",
         "quill-delta": "^5.0.0",
         "quill-mention": "^3.1.0",
+        "remixicon": "^4.3.0",
         "rxjs": "^7.5.5",
         "sass": "^1.57.1",
         "save": "^2.9.0",
@@ -16652,6 +16653,11 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/remixicon": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.3.0.tgz",
+      "integrity": "sha512-jRYQ37dTFSkJtvcxwTUAkIiXkYRvA9EDvVuXPNrmt2xf/VS//CRgFtsX2TAFBoQOhh9SDh7l6La4Xu12snEyxg=="
+    },
     "node_modules/request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -31903,6 +31909,11 @@
         }
       }
     },
+    "remixicon": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.3.0.tgz",
+      "integrity": "sha512-jRYQ37dTFSkJtvcxwTUAkIiXkYRvA9EDvVuXPNrmt2xf/VS//CRgFtsX2TAFBoQOhh9SDh7l6La4Xu12snEyxg=="
+    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",

package.json

@@ -83,6 +83,7 @@
     "quill": "^1.3.7",
     "quill-delta": "^5.0.0",
     "quill-mention": "^3.1.0",
+    "remixicon": "^4.3.0",
     "rxjs": "^7.5.5",
     "sass": "^1.57.1",
     "save": "^2.9.0",

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 {}

src/app/content/hemat-app/device/device-control/device-control.component.html

@@ -112,7 +112,7 @@
                         "
                       >
                         <i
-                          class="icon-bulb font-large-1 blue-grey d-block"
+                          class="ri-lightbulb-flash-fill font-large-1 blue-grey d-block"
                           style="color: #bef264 !important"
                         ></i>
                       </div>

src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html

@@ -16,6 +16,11 @@
           formControlName="name"
         />
       </div>
+      <div class="form-group col-md-6">
+        <label for="status" style="color: #ffffff">Icon:</label>
+        <app-select-icon (iconSelected)="onIconSelected($event)"></app-select-icon>
+      </div>
+      
       <div class="form-group col-md-6">
         <label for="status" style="color: #ffffff">Status:</label>
         <select

src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts

@@ -14,6 +14,7 @@ export class AddEditMasterComponent implements OnInit {
   @Input() mode: any;
   myForm: FormGroup;
   dataMasterStatus: any;
+  selectedIcon: string = '';
 
   constructor(
     public activeModal: NgbActiveModal,
@@ -67,4 +68,9 @@ export class AddEditMasterComponent implements OnInit {
       alert(`Department ${newDept} added! (simulated)`);
     }
   }
+
+  onIconSelected(icon: string): void {
+    this.selectedIcon = icon;
+    this.myForm.get('selectedIcon').setValue(icon);  // Set nilai selectedIcon ke dalam form
+  }
 }

src/app/content/hemat-app/master/master.module.ts

@@ -1,34 +1,34 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from "@angular/core";
-import { CommonModule } from '@angular/common';
+import { CommonModule } from "@angular/common";
-import { MasterCategoryComponent } from './master-category/master-category.component';
+import { MasterCategoryComponent } from "./master-category/master-category.component";
-import { MasterTypeComponent } from './master-type/master-type.component';
+import { MasterTypeComponent } from "./master-type/master-type.component";
-
-import { RouterModule } from '@angular/router';
-import { ChartistModule } from 'ng-chartist';
-import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgChartsModule } from 'ng2-charts';
-import { BlockUIModule } from 'ng-block-ui';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
-import { CardModule } from '../../partials/general/card/card.module';
-import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
-import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
-import { MasterStatusComponent } from './master-status/master-status.component';
-import { MasterDurationUseComponent } from './master-duration-use/master-duration-use.component';
-import { MasterUserComponent } from './master-user/master-user.component';
-import { MasterRoleComponent } from './master-role/master-role.component';
-import { AddEditMasterComponent } from './add-edit-master/add-edit-master.component';
-import { MasterVoltageComponent } from './master-voltage/master-voltage.component';
-import { MasterFloorComponent } from './master-floor/master-floor.component';
-import { MasterRoomComponent } from './master-room/master-room.component';
-import { MasterBuildingComponent } from './master-building/master-building.component';
-import { AddEditMasterBuildingComponent } from './master-building/add-edit-master-building/add-edit-master-building.component';
-import { AddEditMasterRoomComponent } from './master-room/add-edit-master-room/add-edit-master-room.component';
-import { ToastrModule } from 'ngx-toastr';
-
 
+import { RouterModule } from "@angular/router";
+import { ChartistModule } from "ng-chartist";
+import { NgxDatatableModule } from "@swimlane/ngx-datatable";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { NgChartsModule } from "ng2-charts";
+import { BlockUIModule } from "ng-block-ui";
+import { PerfectScrollbarModule } from "ngx-perfect-scrollbar";
+import { BlockTemplateComponent } from "src/app/_layout/blockui/block-template.component";
+import { CardModule } from "../../partials/general/card/card.module";
+import { MatchHeightModule } from "../../partials/general/match-height/match-height.module";
+import { BreadcrumbModule } from "src/app/_layout/breadcrumb/breadcrumb.module";
+import { MasterStatusComponent } from "./master-status/master-status.component";
+import { MasterDurationUseComponent } from "./master-duration-use/master-duration-use.component";
+import { MasterUserComponent } from "./master-user/master-user.component";
+import { MasterRoleComponent } from "./master-role/master-role.component";
+import { AddEditMasterComponent } from "./add-edit-master/add-edit-master.component";
+import { MasterVoltageComponent } from "./master-voltage/master-voltage.component";
+import { MasterFloorComponent } from "./master-floor/master-floor.component";
+import { MasterRoomComponent } from "./master-room/master-room.component";
+import { MasterBuildingComponent } from "./master-building/master-building.component";
+import { AddEditMasterBuildingComponent } from "./master-building/add-edit-master-building/add-edit-master-building.component";
+import { AddEditMasterRoomComponent } from "./master-room/add-edit-master-room/add-edit-master-room.component";
+import { ToastrModule } from "ngx-toastr";
+import { SelectIconModule } from "../component/select-icon/select-icon.module";
+import { NgSelectModule } from "@ng-select/ng-select";
 
 @NgModule({
   declarations: [
@@ -44,7 +44,7 @@ import { ToastrModule } from 'ngx-toastr';
     MasterRoomComponent,
     MasterBuildingComponent,
     AddEditMasterBuildingComponent,
-    AddEditMasterRoomComponent
+    AddEditMasterRoomComponent,
   ],
   imports: [
     CommonModule,
@@ -57,53 +57,55 @@ import { ToastrModule } from 'ngx-toastr';
     PerfectScrollbarModule,
     BreadcrumbModule,
     ReactiveFormsModule,
+    SelectIconModule,
+    NgSelectModule,
     ToastrModule.forRoot(),
     NgbModule,
     BlockUIModule.forRoot({
-      template: BlockTemplateComponent
+      template: BlockTemplateComponent,
     }),
     RouterModule.forChild([
       {
-        path: 'master-category',
+        path: "master-category",
-        component: MasterCategoryComponent
+        component: MasterCategoryComponent,
       },
       {
-        path: 'master-floor',
+        path: "master-floor",
-        component: MasterFloorComponent
+        component: MasterFloorComponent,
       },
       {
-        path: 'master-voltage',
+        path: "master-voltage",
-        component: MasterVoltageComponent
+        component: MasterVoltageComponent,
       },
       {
-        path: 'master-type',
+        path: "master-type",
-        component: MasterTypeComponent
+        component: MasterTypeComponent,
       },
       {
-        path: 'master-status',
+        path: "master-status",
-        component: MasterStatusComponent
+        component: MasterStatusComponent,
       },
       {
-        path: 'master-duration-use',
+        path: "master-duration-use",
-        component: MasterDurationUseComponent
+        component: MasterDurationUseComponent,
       },
       {
-        path: 'master-user',
+        path: "master-user",
-        component: MasterUserComponent
+        component: MasterUserComponent,
       },
       {
-        path: 'master-role',
+        path: "master-role",
-        component: MasterRoleComponent
+        component: MasterRoleComponent,
       },
       {
-        path: 'master-room',
+        path: "master-room",
-        component: MasterRoomComponent
+        component: MasterRoomComponent,
       },
       {
-        path: 'master-building',
+        path: "master-building",
-        component: MasterBuildingComponent
+        component: MasterBuildingComponent,
-      }
+      },
-    ])
+    ]),
-  ]
+  ],
 })
-export class MasterModule { }
+export class MasterModule {}

src/app/content/hemat-app/service/master-api.service.ts

@@ -1,12 +1,18 @@
 import { Injectable } from "@angular/core";
 import { HttpClient, HttpHeaders  } from "@angular/common/http";
 import { Observable } from "rxjs";
-
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
 @Injectable({
   providedIn: "root",
 })
 export class MasterService {
-  constructor(private http: HttpClient) {}
+  loadDataIcon = null;
+  apiBaseURL = 'assets/data';
+  constructor(private http: HttpClient) {
+    this.loadDataIcon = `${this.apiBaseURL}/hemat/remixicons.json`;
+  }
 
   getMasterListData(): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/header-param/list`;
@@ -132,4 +138,8 @@ export class MasterService {
     });
     return this.http.get<any>(url, { headers });
   }
+
+  getIconData(): Observable<any> {
+    return this.http.get(this.loadDataIcon, httpOptions);
+  }
 }

src/assets/data/hemat/remixicons.json

@@ -0,0 +1,564 @@
+{
+  "rows": [
+    {
+      "name": "Bulb Line",
+      "icon": "ri-lightbulb-flash-line"
+    },
+    {
+      "name": "Bulb Fill",
+      "icon": "ri-lightbulb-flash-fill"
+    },
+    {
+      "name": "Plug Fill",
+      "icon": "ri-plug-2-fill"
+    },
+    {
+      "name": "Plug Line",
+      "icon": "ri-plug-2-line"
+    },
+    {
+      "name": "Airplay Fill",
+      "icon": "ri-airplay-fill"
+    },
+    {
+      "name": "Airplay Line",
+      "icon": "ri-airplay-line"
+    },
+    {
+      "name": "Barcode Box Fill",
+      "icon": "ri-barcode-box-fill"
+    },
+    {
+      "name": "Barcode Box Line",
+      "icon": "ri-barcode-box-line"
+    },
+    {
+      "name": "Barcode Fill",
+      "icon": "ri-barcode-fill"
+    },
+    {
+      "name": "Barcode Line",
+      "icon": "ri-barcode-line"
+    },
+    {
+      "name": "Base Station Fill",
+      "icon": "ri-base-station-fill"
+    },
+    {
+      "name": "Base Station Line",
+      "icon": "ri-base-station-line"
+    },
+    {
+      "name": "Battery 2 Charge Fill",
+      "icon": "ri-battery-2-charge-fill"
+    },
+    {
+      "name": "Battery 2 Charge Line",
+      "icon": "ri-battery-2-charge-line"
+    },
+    {
+      "name": "Battery 2 Fill",
+      "icon": "ri-battery-2-fill"
+    },
+    {
+      "name": "Battery 2 Line",
+      "icon": "ri-battery-2-line"
+    },
+    {
+      "name": "Battery Charge Fill",
+      "icon": "ri-battery-charge-fill"
+    },
+    {
+      "name": "Battery Charge Line",
+      "icon": "ri-battery-charge-line"
+    },
+    {
+      "name": "Battery Fill",
+      "icon": "ri-battery-fill"
+    },
+    {
+      "name": "Battery Line",
+      "icon": "ri-battery-line"
+    },
+    {
+      "name": "Battery Low Fill",
+      "icon": "ri-battery-low-fill"
+    },
+    {
+      "name": "Battery Low Line",
+      "icon": "ri-battery-low-line"
+    },
+    {
+      "name": "Battery Saver Fill",
+      "icon": "ri-battery-saver-fill"
+    },
+    {
+      "name": "Battery Saver Line",
+      "icon": "ri-battery-saver-line"
+    },
+    {
+      "name": "Battery Share Fill",
+      "icon": "ri-battery-share-fill"
+    },
+    {
+      "name": "Battery Share Line",
+      "icon": "ri-battery-share-line"
+    },
+    {
+      "name": "Cast Fill",
+      "icon": "ri-cast-fill"
+    },
+    {
+      "name": "Cast Line",
+      "icon": "ri-cast-line"
+    },
+    {
+      "name": "Cellphone Fill",
+      "icon": "ri-cellphone-fill"
+    },
+    {
+      "name": "Cellphone Line",
+      "icon": "ri-cellphone-line"
+    },
+    {
+      "name": "Computer Fill",
+      "icon": "ri-computer-fill"
+    },
+    {
+      "name": "Computer Line",
+      "icon": "ri-computer-line"
+    },
+    {
+      "name": "Cpu Fill",
+      "icon": "ri-cpu-fill"
+    },
+    {
+      "name": "Cpu Line",
+      "icon": "ri-cpu-line"
+    },
+    {
+      "name": "Database 2 Fill",
+      "icon": "ri-database-2-fill"
+    },
+    {
+      "name": "Database 2 Line",
+      "icon": "ri-database-2-line"
+    },
+    {
+      "name": "Database Fill",
+      "icon": "ri-database-fill"
+    },
+    {
+      "name": "Database Line",
+      "icon": "ri-database-line"
+    },
+    {
+      "name": "Device Fill",
+      "icon": "ri-device-fill"
+    },
+    {
+      "name": "Device Line",
+      "icon": "ri-device-line"
+    },
+    {
+      "name": "Dual Sim 1 Fill",
+      "icon": "ri-dual-sim-1-fill"
+    },
+    {
+      "name": "Dual Sim 1 Line",
+      "icon": "ri-dual-sim-1-line"
+    },
+    {
+      "name": "Dual Sim 2 Fill",
+      "icon": "ri-dual-sim-2-fill"
+    },
+    {
+      "name": "Dual Sim 2 Line",
+      "icon": "ri-dual-sim-2-line"
+    },
+    {
+      "name": "Fingerprint 2 Fill",
+      "icon": "ri-fingerprint-2-fill"
+    },
+    {
+      "name": "Fingerprint 2 Line",
+      "icon": "ri-fingerprint-2-line"
+    },
+    {
+      "name": "Fingerprint Fill",
+      "icon": "ri-fingerprint-fill"
+    },
+    {
+      "name": "Fingerprint Line",
+      "icon": "ri-fingerprint-line"
+    },
+    {
+      "name": "Gamepad Fill",
+      "icon": "ri-gamepad-fill"
+    },
+    {
+      "name": "Gamepad Line",
+      "icon": "ri-gamepad-line"
+    },
+    {
+      "name": "Gps Fill",
+      "icon": "ri-gps-fill"
+    },
+    {
+      "name": "Gps Line",
+      "icon": "ri-gps-line"
+    },
+    {
+      "name": "Gradienter Fill",
+      "icon": "ri-gradienter-fill"
+    },
+    {
+      "name": "Gradienter Line",
+      "icon": "ri-gradienter-line"
+    },
+    {
+      "name": "Hard Drive 2 Fill",
+      "icon": "ri-hard-drive-2-fill"
+    },
+    {
+      "name": "Hard Drive 2 Line",
+      "icon": "ri-hard-drive-2-line"
+    },
+    {
+      "name": "Hard Drive Fill",
+      "icon": "ri-hard-drive-fill"
+    },
+    {
+      "name": "Hard Drive Line",
+      "icon": "ri-hard-drive-line"
+    },
+    {
+      "name": "Hotspot Fill",
+      "icon": "ri-hotspot-fill"
+    },
+    {
+      "name": "Hotspot Line",
+      "icon": "ri-hotspot-line"
+    },
+    {
+      "name": "Install Fill",
+      "icon": "ri-install-fill"
+    },
+    {
+      "name": "Install Line",
+      "icon": "ri-install-line"
+    },
+    {
+      "name": "Keyboard Box Fill",
+      "icon": "ri-keyboard-box-fill"
+    },
+    {
+      "name": "Keyboard Box Line",
+      "icon": "ri-keyboard-box-line"
+    },
+    {
+      "name": "Keyboard Fill",
+      "icon": "ri-keyboard-fill"
+    },
+    {
+      "name": "Keyboard Line",
+      "icon": "ri-keyboard-line"
+    },
+    {
+      "name": "Mac Fill",
+      "icon": "ri-mac-fill"
+    },
+    {
+      "name": "Mac Line",
+      "icon": "ri-mac-line"
+    },
+    {
+      "name": "Macbook Fill",
+      "icon": "ri-macbook-fill"
+    },
+    {
+      "name": "Macbook Line",
+      "icon": "ri-macbook-line"
+    },
+    {
+      "name": "Mouse Fill",
+      "icon": "ri-mouse-fill"
+    },
+    {
+      "name": "Mouse Line",
+      "icon": "ri-mouse-line"
+    },
+    {
+      "name": "Phone Fill",
+      "icon": "ri-phone-fill"
+    },
+    {
+      "name": "Phone Find Fill",
+      "icon": "ri-phone-find-fill"
+    },
+    {
+      "name": "Phone Find Line",
+      "icon": "ri-phone-find-line"
+    },
+    {
+      "name": "Phone Line",
+      "icon": "ri-phone-line"
+    },
+    {
+      "name": "Phone Lock Fill",
+      "icon": "ri-phone-lock-fill"
+    },
+    {
+      "name": "Phone Lock Line",
+      "icon": "ri-phone-lock-line"
+    },
+    {
+      "name": "Qr Code Fill",
+      "icon": "ri-qr-code-fill"
+    },
+    {
+      "name": "Qr Code Line",
+      "icon": "ri-qr-code-line"
+    },
+    {
+      "name": "Qr Scan 2 Fill",
+      "icon": "ri-qr-scan-2-fill"
+    },
+    {
+      "name": "Qr Scan 2 Line",
+      "icon": "ri-qr-scan-2-line"
+    },
+    {
+      "name": "Qr Scan Fill",
+      "icon": "ri-qr-scan-fill"
+    },
+    {
+      "name": "Qr Scan Line",
+      "icon": "ri-qr-scan-line"
+    },
+    {
+      "name": "Radar Fill",
+      "icon": "ri-radar-fill"
+    },
+    {
+      "name": "Radar Line",
+      "icon": "ri-radar-line"
+    },
+    {
+      "name": "Remote Control 2 Fill",
+      "icon": "ri-remote-control-2-fill"
+    },
+    {
+      "name": "Remote Control 2 Line",
+      "icon": "ri-remote-control-2-line"
+    },
+    {
+      "name": "Remote Control Fill",
+      "icon": "ri-remote-control-fill"
+    },
+    {
+      "name": "Remote Control Line",
+      "icon": "ri-remote-control-line"
+    },
+    {
+      "name": "Router Fill",
+      "icon": "ri-router-fill"
+    },
+    {
+      "name": "Router Line",
+      "icon": "ri-router-line"
+    },
+    {
+      "name": "Rss Fill",
+      "icon": "ri-rss-fill"
+    },
+    {
+      "name": "Rss Line",
+      "icon": "ri-rss-line"
+    },
+    {
+      "name": "Save 2 Fill",
+      "icon": "ri-save-2-fill"
+    },
+    {
+      "name": "Save 2 Line",
+      "icon": "ri-save-2-line"
+    },
+    {
+      "name": "Save 3 Fill",
+      "icon": "ri-save-3-fill"
+    },
+    {
+      "name": "Save 3 Line",
+      "icon": "ri-save-3-line"
+    },
+    {
+      "name": "Save Fill",
+      "icon": "ri-save-fill"
+    },
+    {
+      "name": "Save Line",
+      "icon": "ri-save-line"
+    },
+    {
+      "name": "Scan 2 Fill",
+      "icon": "ri-scan-2-fill"
+    },
+    {
+      "name": "Scan 2 Line",
+      "icon": "ri-scan-2-line"
+    },
+    {
+      "name": "Scan Fill",
+      "icon": "ri-scan-fill"
+    },
+    {
+      "name": "Scan Line",
+      "icon": "ri-scan-line"
+    },
+    {
+      "name": "Sd Card Fill",
+      "icon": "ri-sd-card-fill"
+    },
+    {
+      "name": "Sd Card Line",
+      "icon": "ri-sd-card-line"
+    },
+    {
+      "name": "Sd Card Mini Fill",
+      "icon": "ri-sd-card-mini-fill"
+    },
+    {
+      "name": "Sd Card Mini Line",
+      "icon": "ri-sd-card-mini-line"
+    },
+    {
+      "name": "Sensor Fill",
+      "icon": "ri-sensor-fill"
+    },
+    {
+      "name": "Sensor Line",
+      "icon": "ri-sensor-line"
+    },
+    {
+      "name": "Server Fill",
+      "icon": "ri-server-fill"
+    },
+    {
+      "name": "Server Line",
+      "icon": "ri-server-line"
+    },
+    {
+      "name": "Shirt Fill",
+      "icon": "ri-shirt-fill"
+    },
+    {
+      "name": "Shirt Line",
+      "icon": "ri-shirt-line"
+    },
+    {
+      "name": "Signal Tower Fill",
+      "icon": "ri-signal-tower-fill"
+    },
+    {
+      "name": "Signal Tower Line",
+      "icon": "ri-signal-tower-line"
+    },
+    {
+      "name": "Sim Card 2 Fill",
+      "icon": "ri-sim-card-2-fill"
+    },
+    {
+      "name": "Sim Card 2 Line",
+      "icon": "ri-sim-card-2-line"
+    },
+    {
+      "name": "Sim Card Fill",
+      "icon": "ri-sim-card-fill"
+    },
+    {
+      "name": "Sim Card Line",
+      "icon": "ri-sim-card-line"
+    },
+    {
+      "name": "Smartphone Fill",
+      "icon": "ri-smartphone-fill"
+    },
+    {
+      "name": "Smartphone Line",
+      "icon": "ri-smartphone-line"
+    },
+    {
+      "name": "Tablet Fill",
+      "icon": "ri-tablet-fill"
+    },
+    {
+      "name": "Tablet Line",
+      "icon": "ri-tablet-line"
+    },
+    {
+      "name": "Tv 2 Fill",
+      "icon": "ri-tv-2-fill"
+    },
+    {
+      "name": "Tv 2 Line",
+      "icon": "ri-tv-2-line"
+    },
+    {
+      "name": "Tv Fill",
+      "icon": "ri-tv-fill"
+    },
+    {
+      "name": "Tv Line",
+      "icon": "ri-tv-line"
+    },
+    {
+      "name": "UDisk Fill",
+      "icon": "ri-u-disk-fill"
+    },
+    {
+      "name": "UDisk Line",
+      "icon": "ri-u-disk-line"
+    },
+    {
+      "name": "Usb Fill",
+      "icon": "ri-usb-fill"
+    },
+    {
+      "name": "Usb Line",
+      "icon": "ri-usb-line"
+    },
+    {
+      "name": "Vidicon 2 Fill",
+      "icon": "ri-vidicon-2-fill"
+    },
+    {
+      "name": "Vidicon 2 Line",
+      "icon": "ri-vidicon-2-line"
+    },
+    {
+      "name": "Vidicon Fill",
+      "icon": "ri-vidicon-fill"
+    },
+    {
+      "name": "Vidicon Line",
+      "icon": "ri-vidicon-line"
+    },
+    {
+      "name": "Watch 2 Fill",
+      "icon": "ri-timer-fill"
+    },
+    {
+      "name": "Watch 2 Line",
+      "icon": "ri-timer-line"
+    },
+    {
+      "name": "Watch Fill",
+      "icon": "ri-timer-flash-fill"
+    },
+    {
+      "name": "Watch Line",
+      "icon": "ri-timer-flash-line"
+    }
+  ]
+}

src/index.html

@@ -23,6 +23,10 @@
   <link rel="apple-touch-icon" sizes="152x152" href="assets/images/ico/apple-icon-152.png">
   <link rel="apple-touch-icon" sizes="76x76" href="assets/images/ico/apple-icon-76.png">
   <link rel="apple-touch-icon" sizes="60x60" href="assets/images/ico/apple-icon-60.png">
+  <link
+    href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css"
+    rel="stylesheet"
+/>
 
   <link rel="shortcut icon" type="image/x-icon" href="assets/images/logo/logo.ico">