feat(material-icons-extended): add fuzzy search and improve performance (#3835)

Author: simeonoff

live-editing/configs/IconConfigGenerator.ts

@@ -55,7 +55,7 @@ export class IconConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             component: 'MaterialIconsExtendedComponent',
             appConfig: BaseAppConfig,
-            additionalDependencies: ['file-saver', '@igniteui/material-icons-extended'],
+            additionalDependencies: ['file-saver', '@igniteui/material-icons-extended', 'fuse.js'],
             shortenComponentPathBy: "/data-display/icon/"
         }));
 

package-lock.json

@@ -71,6 +71,7 @@
     "dompurify": "^3.2.7",
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
+    "fuse.js": "^7.1.0",
     "hammerjs": "^2.0.8",
     "igniteui-angular": "^21.0.0",
     "igniteui-angular-charts": "^20.2.0",

package.json

@@ -7,7 +7,7 @@
         [value]="selectedCategory"
         >
         <label igxLabel>Select category</label>
-        @for (option of categories; track option) {
+        @for (option of categories; track option.category) {
           <igx-select-item
             [value]="option.category"
             >
@@ -17,39 +17,37 @@
       </igx-select>
     </div>
     <igx-input-group class="sample__header-search" type="search">
-      <input #input igxInput placeholder="Search by icon name or keyword" />
+      <input #input igxInput placeholder="Search by icon name or keyword" (input)="onSearchInput(input.value)" />
       <igx-prefix>
         <igx-icon>search</igx-icon>
       </igx-prefix>
       @if (input.value.length > 0) {
         <igx-suffix
-          (click)="input.value = ''"
+          (click)="input.value = ''; clearSearch()"
           >
           <igx-icon>clear</igx-icon>
         </igx-suffix>
       }
     </igx-input-group>
   </div>
   <div class="sample__body">
-    @if ((allIcons | filterByName: input.value | categoriesFilter: selectedCategory); as fResults) {
-      @for (group of fResults; track group) {
+    @if (filteredResults$ | async; as fResults) {
+      @for (group of fResults; track trackByCategory($index, group)) {
         <article class="sample__body-inner">
           <header class="sample__body-title">
             {{ group.category }}
           </header>
           <section class="sample__body-section">
             <div class="sample__grid">
-              @for (icon of group.icons; track icon) {
+              @for (icon of group.icons; track trackByIcon($index, icon)) {
                 <div
                   class="sample__grid-item"
+                  (mouseenter)="onIconMouseEnter(icon)"
+                  (mouseleave)="onIconMouseLeave()"
                   >
                   <button
                     [value]="icon.name"
-                                [title]="
-                                    'Copy &quot;' +
-                                    icon.name +
-                                    '&quot; to clipboard'
-                                "
+                    [title]="'Copy &quot;' + icon.name + '&quot; to clipboard'"
                     (click)="copyValue($event, icon.name)"
                     class="sample__grid-item-clipboard"
                     >
@@ -59,25 +57,26 @@
                     <igx-icon
                       class="sample__grid-icon"
                       family="imx-icons"
-                      name="{{ icon.name }}"
-                    ></igx-icon>
+                      [name]="icon.name">
+                    </igx-icon>
                     <span
                       class="sample__grid-icon-name"
-                      title="{{ icon.name }}"
-                      >{{ icon.name }}</span
-                      >
-                    </div>
+                      [title]="icon.name">
+                      {{ icon.name }}
+                    </span>
+                  </div>
+                  @if (hoveredIcon === icon) {
                     <button
                       (click)="downloadFile(icon)"
-                      igxripple
                       class="sample__grid-item-download"
                       igxButton="contained"
-                      >
+                      igxRipple>
                       <igx-icon>arrow_downward</igx-icon>
                       <span>SVG</span>
                     </button>
-                  </div>
-                }
+                  }
+                </div>
+              }
               </div>
             </section>
           </article>

src/app/data-display/icon/material-icons-extended/material-icons-extended.component.html

@@ -152,6 +152,7 @@ $clipboardSuccessColor: color($color: 'success');
     padding: $grid-item-padding;
     position: relative;
     border: $grid-item-border-width solid transparent;
+    contain: layout;
 
     &:hover,
     &:focus {