refactor: move to ng-icons instead of raw icons

* refactor: move select and checkbox to icons

* refactor: drawer,dialog,radio-button,dark-mode to ng-icons

* refactor: accordion,pagination to icons

* refactor: move to ng-icons

* refactor: move away from lucide

* refactor: remove lucide angular

* fix: url design fix

Author: lukonik

package-lock.json

@@ -40,6 +40,8 @@
     "@angular/router": "^19.0.6",
     "@angular/ssr": "^19.0.7",
     "@docsearch/js": "^3.8.3",
+    "@ng-icons/core": "^30.4.0",
+    "@ng-icons/material-icons": "^30.4.0",
     "@ngverse/icons-lu": "^0.0.12",
     "@tailwindcss/postcss": "^4.0.8",
     "@types/file-saver": "^2.0.7",
@@ -48,7 +50,6 @@
     "file-saver": "^2.0.5",
     "i": "^0.3.7",
     "jszip": "^3.10.1",
-    "lucide-angular": "^0.462.0",
     "ngx-highlightjs": "^12.0.0",
     "npm": "^10.9.2",
     "postcss": "^8.5.3",

package.json

@@ -1,7 +1,7 @@
+import { IconRegistry } from '@/ui/icon/icon.registry';
 import { Component, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './features/header/header.component';
-import { IconRegistry } from '@/ui/icon/icon.registry';
 
 @Component({
   selector: 'doc-root',
@@ -13,15 +13,6 @@ export class AppComponent {
   iconRegistry = inject(IconRegistry);
 
   constructor() {
-    this.iconRegistry.addIcon('copy', 'images/copy.svg');
-    this.iconRegistry.addIcon('check', 'images/check.svg');
-    this.iconRegistry.addIcon('arrow-right', 'images/arrow-right.svg');
-    this.iconRegistry.addIcon('arrow-left', 'images/arrow-left.svg');
-    this.iconRegistry.addIcon('clipboard', 'images/clipboard.svg');
-    this.iconRegistry.addIcon('clipboard-paste', 'images/clipboard-paste.svg');
-    this.iconRegistry.addIcon('rocket', 'images/rocket.svg');
-    this.iconRegistry.addIcon('external-link', 'images/external-link.svg');
-    this.iconRegistry.addIcon('star', 'images/star.svg');
     this.iconRegistry.addIcon('github', 'images/github.svg');
     this.iconRegistry.addIcon('logo', 'logo.svg');
   }

projects/docs/public/images/arrow-left.svg

@@ -8,7 +8,7 @@
       [href]="api.articleLink"
       target="_blank"
       >Article
-      <app-icon width="18" height="18" name="external-link"></app-icon>
+      <ng-icon [svg]="EXTERNAL_LINK" size="18"></ng-icon>
     </a>
   </p>
 }
@@ -21,7 +21,7 @@ <h5 class="my-0 pb-2 text-lg font-medium">API</h5>
       target="_blank"
       class="inline-flex items-center gap-1 rounded-xl bg-slate-200 px-2 py-1 text-xs"
     >
-      WAI-ARIA <external-link-icon size="14"> </external-link-icon>
+      WAI-ARIA <ng-icon [svg]="EXTERNAL_LINK" size="14"></ng-icon>
     </a>
   }
   @if (api.reliesOn) {
@@ -30,12 +30,12 @@ <h5 class="my-0 pb-2 text-lg font-medium">API</h5>
       target="_blank"
       class="inline-flex items-center gap-1 rounded-xl bg-slate-200 px-2 py-1 text-xs"
     >
-      Relies on<external-link-icon size="14"> </external-link-icon>
+      Relies on<ng-icon [svg]="EXTERNAL_LINK" size="14"></ng-icon>
     </a>
   }
 </div>
 
-<app-divider class="mb-6"></app-divider>
+<app-divider class="mt-2 mb-6"></app-divider>
 @if (api; as api) {
   @if (api.ariaDescription) {
     <p class="mb-6">WAI-ARIA: {{ api.ariaDescription }}</p>

projects/docs/public/images/arrow-right.svg

@@ -1,8 +1,8 @@
 import { DividerComponent } from '@/ui/divider/divider.component';
-import { IconComponent } from '@/ui/icon/icon.component';
 import { Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { ExternalLinkIcon } from '@ngverse/icons-lu';
+import { NgIcon } from '@ng-icons/core';
+import { matOpenInNew } from '@ng-icons/material-icons/baseline';
 import {
   ApiEntity,
   ApiInputsComponent,
@@ -18,16 +18,11 @@ export interface ApiInfo {
 }
 @Component({
   selector: 'doc-api-info',
-  imports: [
-    ApiInputsComponent,
-    ExternalLinkIcon,
-    RouterLink,
-    IconComponent,
-    DividerComponent,
-  ],
+  imports: [ApiInputsComponent, RouterLink, DividerComponent, NgIcon],
   templateUrl: './api-info.component.html',
   styleUrl: './api-info.component.css',
 })
 export class ApiInfoComponent {
   apiInfo = input.required<ApiInfo>();
+  EXTERNAL_LINK = matOpenInNew;
 }

projects/docs/public/images/check.svg

@@ -4,11 +4,7 @@
     (click)="copy()"
     class="copy-button"
   >
-    @if (copied()) {
-      <app-icon name="check" width="20" height="20"></app-icon>
-    } @else {
-      <app-icon name="copy" width="20" height="20"></app-icon>
-    }
+    <ng-icon size="20" [svg]="copied() ? CHECK_ICON : COPY_ICON"></ng-icon>
   </doc-icon-button>
 }
 <app-card

projects/docs/public/images/clipboard-paste.svg

@@ -1,13 +1,14 @@
+import { CardComponent } from '@/ui/card/card.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { Component, computed, input, signal } from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { matCheck, matContentCopy } from '@ng-icons/material-icons/baseline';
 import { Highlight } from 'ngx-highlightjs';
-import { CardComponent } from '@/ui/card/card.component';
-import { IconComponent } from '@/ui/icon/icon.component';
 import { EMPTY_FILE_TOKEN } from '../../services/file.service';
 
 @Component({
   selector: 'doc-source-code',
-  imports: [Highlight, ClipboardModule, IconComponent, CardComponent],
+  imports: [Highlight, ClipboardModule, CardComponent, NgIcon],
   templateUrl: './source-code.component.html',
   styleUrl: './source-code.component.css',
 })
@@ -23,6 +24,9 @@ export class SourceCodeComponent {
 
   surface = input(false);
 
+  COPY_ICON = matContentCopy;
+  CHECK_ICON = matCheck;
+
   showCopy = computed(
     () => this.allowCopy() && !!this.code() && this.code() !== EMPTY_FILE_TOKEN
   );

projects/docs/public/images/clipboard.svg

@@ -1,3 +1,7 @@
+import { OptionGroupLabelComponent } from '@/ui/select/option-group-label.component';
+import { OptionGroupComponent } from '@/ui/select/option-group.component';
+import { OptionComponent } from '@/ui/select/option.component';
+import { SelectComponent } from '@/ui/select/select.component';
 import {
   Component,
   computed,
@@ -8,17 +12,11 @@ import {
   signal,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { ChevronDown, Folder, LucideAngularModule } from 'lucide-angular';
-import { OptionGroupLabelComponent } from '@/ui/select/option-group-label.component';
-import { OptionGroupComponent } from '@/ui/select/option-group.component';
-import { OptionComponent } from '@/ui/select/option.component';
-import { SelectComponent } from '@/ui/select/select.component';
 import { SourceTreeFile, SourceTreeFolder } from '../source-tree-builder';
 
 @Component({
   selector: 'doc-source-tree-select',
   imports: [
-    LucideAngularModule,
     SelectComponent,
     OptionComponent,
     FormsModule,
@@ -38,9 +36,6 @@ export class SourceTreeSelectComponent {
 
   allFiles = computed(() => this.sourceTree().flatMap((sour) => sour.files));
 
-  ChevronDown = ChevronDown;
-  Folder = Folder;
-
   constructor() {
     effect(() => {
       if (this.selectedFile()) {

projects/docs/public/images/external-link.svg

@@ -15,17 +15,34 @@
   <div>
     <p class="buttons-label">Icon Button</p>
     <div class="buttons-container">
-      <button appButton icon>
-        <app-icon name="arrow-right"></app-icon>
+      <button appButton icon aria-label="show case button icon">
+        <ng-icon size="24" [svg]="ARROW_RIGHT"></ng-icon>
       </button>
-      <button appButton icon color="secondary">
-        <app-icon name="arrow-right"></app-icon>
+      <button
+        appButton
+        icon
+        color="secondary"
+        aria-label="show case button icon"
+      >
+        <ng-icon size="24" [svg]="ARROW_RIGHT"></ng-icon>
       </button>
-      <button appButton icon color="danger" variant="outline">
-        <app-icon name="arrow-right"></app-icon>
+      <button
+        appButton
+        icon
+        color="danger"
+        variant="outline"
+        aria-label="show case button icon"
+      >
+        <ng-icon size="24" [svg]="ARROW_RIGHT"></ng-icon>
       </button>
-      <button appButton icon color="success" variant="link">
-        <app-icon name="arrow-right"></app-icon>
+      <button
+        appButton
+        icon
+        color="success"
+        variant="link"
+        aria-label="show case button icon"
+      >
+        <ng-icon size="24" [svg]="ARROW_RIGHT"></ng-icon>
       </button>
     </div>
   </div>

projects/docs/public/images/rocket.svg

@@ -1,11 +1,14 @@
-import { Component } from '@angular/core';
 import { ButtonComponent } from '@/ui/button/button.component';
-import { IconComponent } from '@/ui/icon/icon.component';
+import { Component } from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { matArrowForward } from '@ng-icons/material-icons/baseline';
 
 @Component({
   selector: 'doc-show-case-button',
-  imports: [ButtonComponent, IconComponent],
+  imports: [ButtonComponent, NgIcon],
   templateUrl: './show-case-button.component.html',
   styleUrl: './show-case-button.component.css',
 })
-export class ShowCaseButtonComponent {}
+export class ShowCaseButtonComponent {
+  ARROW_RIGHT = matArrowForward;
+}

projects/docs/public/images/star.svg

@@ -4,7 +4,7 @@
     <ng-template appTabHeader>
       <div class="custom-label">
         <span>Custom Label</span>
-        <app-icon name="check" width="16" height="16"></app-icon>
+        <ng-icon [svg]="CHECK_ICON"></ng-icon>
       </div>
     </ng-template>
     This is Custom Label Tab enjoy!