Add demo for filled icons

radzenhq · Nov 8, 2024 · d676c67 · d676c67
1 parent 9316170
commit d676c67
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/RadzenBlazorDemos/Pages/IconFilled.razor b/RadzenBlazorDemos/Pages/IconFilled.razor
@@ -0,0 +1,15 @@
+<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" class="rz-p-0 rz-p-md-6 rz-p-lg-12" >
+    <RadzenIcon class="filled-icon" Icon="info" IconColor="@Colors.Info" />
+    <RadzenIcon class="filled-icon" Icon="warning" IconColor="@Colors.Warning" />
+    <RadzenIcon class="filled-icon" Icon="dangerous" IconColor="@Colors.Danger" />
+    <RadzenIcon class="filled-icon" Icon="done" IconColor="@Colors.Success" />
+    <RadzenIcon class="filled-icon" Icon="smart_button" IconColor="@Colors.Primary" />
+    <RadzenIcon class="filled-icon" Icon="smart_button" IconColor="@Colors.Secondary" />
+    <RadzenIcon class="filled-icon" Icon="dialpad" IconColor="pink" />
+</RadzenStack>
+
+<style>
+.filled-icon {
+    font-variation-settings: 'FILL' 1;
+}
+</style>
diff --git a/RadzenBlazorDemos/Pages/IconPage.razor b/RadzenBlazorDemos/Pages/IconPage.razor
@@ -31,6 +31,16 @@
     <IconColor />
 </RadzenExample>
 
+<RadzenText Anchor="icon#filled-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
+    Filled icons
+</RadzenText>
+<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
+    Use <code>font-variation-settings</code> CSS property for filled icons with the Material Symbols font. Note that some icons cannot be filled because they lack elements that allow for filling.
+</RadzenText>
+<RadzenExample ComponentName="Icon" Example="IconFilled">
+    <IconFilled />
+</RadzenExample>
+
 <RadzenText Anchor="icon#styled-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
     Syled icons
 </RadzenText>