From 471f7184fb4db8adbdb9bc68bbd8b66aec528086 Mon Sep 17 00:00:00 2001
From: Leigh Pointer <leigh.pointer@outlook.com>
Date: Wed, 23 Aug 2023 07:47:35 +0200
Subject: [PATCH] Added Icon Preview

Added an icon preview to the icon selecting control
---
 Oqtane.Client/Modules/Admin/Pages/Add.razor  | 5 ++++-
 Oqtane.Client/Modules/Admin/Pages/Edit.razor | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/Oqtane.Client/Modules/Admin/Pages/Add.razor b/Oqtane.Client/Modules/Admin/Pages/Add.razor
index 561e3d94..e934ed9d 100644
--- a/Oqtane.Client/Modules/Admin/Pages/Add.razor
+++ b/Oqtane.Client/Modules/Admin/Pages/Add.razor
@@ -111,9 +111,12 @@
                     </div>
                     <div class="row mb-1 align-items-center">
                         <Label Class="col-sm-3" For="icon" HelpText="Optionally provide an icon class name for this page which will be displayed in the site navigation" ResourceKey="Icon">Icon: </Label>
-                        <div class="col-sm-9">
+                        <div class="col-sm-8">
                             <InputList Value="@_icon" ValueChanged="IconChanged" InputValues="@IconList" />
                         </div>
+                        <div class="col-sm-1">
+                            <i class="@_icon"></i>
+                        </div>
                     </div>
                     <div class="row mb-1 align-items-center">
                         <Label Class="col-sm-3" For="personalizable" HelpText="Select whether you would like users to be able to personalize this page with their own content" ResourceKey="Personalizable">Personalizable? </Label>
diff --git a/Oqtane.Client/Modules/Admin/Pages/Edit.razor b/Oqtane.Client/Modules/Admin/Pages/Edit.razor
index d02547fe..f6471eea 100644
--- a/Oqtane.Client/Modules/Admin/Pages/Edit.razor
+++ b/Oqtane.Client/Modules/Admin/Pages/Edit.razor
@@ -123,7 +123,10 @@
                         </div>
                         <div class="row mb-1 align-items-center">
                             <Label Class="col-sm-3" For="icon" HelpText="Optionally provide an icon class name for this page which will be displayed in the site navigation" ResourceKey="Icon">Icon: </Label>
-                            <div class="col-sm-9">
+                            <div class="col-sm-1">
+                                <i class="@_icon"></i>
+                            </div>
+                            <div class="col-sm-8">
                                 <InputList Value="@_icon" ValueChanged="IconChanged" InputValues="@IconList" />
                             </div>
                         </div>