Icon

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>

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 {
+
+}