From 4e8019db2866420ee5bffd5f7bb7b6f660053ece Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Wed, 26 Jun 2024 13:18:34 +0900
Subject: [PATCH] Icon

---
 .../Components/Layout/NavMenu.razor           |  8 +++-
 .../Components/Pages/Icon.razor               | 39 +++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 ComponentPractice/ComponentPractice/Components/Pages/Icon.razor

diff --git a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
index 287328f..7fa5c67 100644
--- a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
+++ b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
@@ -28,7 +28,13 @@
 
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="typo">
-                <span class="bi" aria-hidden="true"></span> Typo
+                <RadzenIcon Icon="description" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;Typo
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="icon">
+                <RadzenIcon Icon="face" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;Icon
             </NavLink>
         </div>
     </nav>
diff --git a/ComponentPractice/ComponentPractice/Components/Pages/Icon.razor b/ComponentPractice/ComponentPractice/Components/Pages/Icon.razor
new file mode 100644
index 0000000..126401d
--- /dev/null
+++ b/ComponentPractice/ComponentPractice/Components/Pages/Icon.razor
@@ -0,0 +1,39 @@
+@page "/icon"
+
+@rendermode RenderMode.InteractiveServer
+
+<RadzenText TextStyle="TextStyle.H5">Representative Icons</RadzenText>
+<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" class="icon-preview rz-p-12">
+    <RadzenIcon Icon="info"></RadzenIcon>info
+    <RadzenIcon Icon="warning"></RadzenIcon>warning
+    <RadzenIcon Icon="dangerous"></RadzenIcon>dangerous
+    <RadzenIcon Icon="done"></RadzenIcon>done
+    <RadzenIcon Icon="smart_button"></RadzenIcon>smart_button
+    <RadzenIcon Icon="dialpad"></RadzenIcon>dialpad
+</RadzenStack>
+
+<RadzenText TextStyle="TextStyle.H5">Icon Color</RadzenText>
+<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" class="icon-preview rz-p-12">
+    <RadzenIcon Icon="info" IconColor="@Colors.Info"></RadzenIcon>Info
+    <RadzenIcon Icon="warning" IconColor="@Colors.Warning"></RadzenIcon>Warning
+    <RadzenIcon Icon="dangerous" IconColor="@Colors.Danger"></RadzenIcon>Danger
+    <RadzenIcon Icon="done" IconColor="@Colors.Success"></RadzenIcon>Success
+    <RadzenIcon Icon="smart_button" IconColor="@Colors.Primary"></RadzenIcon>Primary
+    <RadzenIcon Icon="smart_button" IconColor="@Colors.Secondary"></RadzenIcon>Secondary
+    <RadzenIcon Icon="dialpad" IconColor="pink"></RadzenIcon>pink
+</RadzenStack>
+
+<RadzenText TextStyle="TextStyle.H5">Styled Icons</RadzenText>
+<RadzenDataList TItem="IconStyle" Data="@(Enum.GetValues<IconStyle>())" WrapItems="true" class="rz-p-12">
+    <Template Context="style">
+        <div>
+            <h6>@style.ToString()</h6>
+            <RadzenIcon Icon="dashboard" IconStyle="@style" />
+            <RadzenIcon Icon="open_with" IconStyle="@style" />
+        </div>
+    </Template>
+</RadzenDataList>
+
+@code {
+
+}