refactor(material-icons-extended): improve rendering performance

Author: simeonoff

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

@@ -42,14 +42,12 @@
               @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.scss

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

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

@@ -115,6 +115,17 @@ export class MaterialIconsExtendedComponent implements OnInit {
 
     public allIcons = imxIcons;
     public selectedCategory: IconCategory | 'all' = 'all';
+    
+    // Floating download button
+    public hoveredIcon: IMXIcon | null = null;
+
+    onIconMouseEnter(icon: IMXIcon) {
+        this.hoveredIcon = icon;
+    }
+
+    onIconMouseLeave() {
+        this.hoveredIcon = null;
+    }
 
     handleSelection(event: ISelectionEventArgs) {
         this.selectedCategory = event.newSelection.value;