From c1ad7cfb7d3073ba7025dc1c6e04e79f418fb902 Mon Sep 17 00:00:00 2001
From: Nasreddine Bac Ali <nasreddine.bacali95@gmail.com>
Date: Tue, 18 Oct 2022 23:30:08 +0200
Subject: [PATCH] Group icons by icon name in search page

---
 .../preview/src/components/pages/search/search-iconset.tsx  | 1 +
 packages/preview/src/styles/_components.scss                | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/packages/preview/src/components/pages/search/search-iconset.tsx b/packages/preview/src/components/pages/search/search-iconset.tsx
index 3f919b515..e72625763 100644
--- a/packages/preview/src/components/pages/search/search-iconset.tsx
+++ b/packages/preview/src/components/pages/search/search-iconset.tsx
@@ -16,6 +16,7 @@ export default function SearchIconSet({ icon, query, highlightPattern }) {
         );
         return (
           <>
+            {found.length > 0 && <h3 className="icon-name">{icon.name}</h3>}
             {found.map((name) => (
               <Icon
                 key={name}
diff --git a/packages/preview/src/styles/_components.scss b/packages/preview/src/styles/_components.scss
index 02435c10c..535408744 100644
--- a/packages/preview/src/styles/_components.scss
+++ b/packages/preview/src/styles/_components.scss
@@ -157,6 +157,12 @@ a {
   grid-row-gap: var(--space-2);
   text-align: center;
 
+  .icon-name {
+    margin-bottom: 0;
+    grid-column: 1 / -1;
+    text-align: left;
+  }
+
   .item {
     outline: none;