refactor(*): remove all bundled Google Material Icons and related code

LumexUI.sln

@@ -26,6 +26,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "LumexUI.Docs", "docs\LumexU
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "LumexUI.Docs.Client", "docs\LumexUI.Docs.Client\LumexUI.Docs.Client.csproj", "{6CE81AB3-399F-44CB-9DBE-9A8D62B07C8A}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "LumexUI.Shared.Icons", "src\LumexUI.Shared.Icons\LumexUI.Shared.Icons.csproj", "{9C883692-7F43-4E72-8610-AB1996BED8BC}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -52,6 +54,10 @@ Global
 		{6CE81AB3-399F-44CB-9DBE-9A8D62B07C8A}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{6CE81AB3-399F-44CB-9DBE-9A8D62B07C8A}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{6CE81AB3-399F-44CB-9DBE-9A8D62B07C8A}.Release|Any CPU.Build.0 = Release|Any CPU
+		{9C883692-7F43-4E72-8610-AB1996BED8BC}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{9C883692-7F43-4E72-8610-AB1996BED8BC}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{9C883692-7F43-4E72-8610-AB1996BED8BC}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{9C883692-7F43-4E72-8610-AB1996BED8BC}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -62,6 +68,7 @@ Global
 		{06E849E9-A8EA-410B-83BC-0366524C4953} = {898610F1-A6C1-422C-84C9-C1E386957F31}
 		{2A341376-2409-422C-A7A9-1AE6E86F91D9} = {3F4DE3FA-2636-440C-ACCC-137BAD95BAC4}
 		{6CE81AB3-399F-44CB-9DBE-9A8D62B07C8A} = {3F4DE3FA-2636-440C-ACCC-137BAD95BAC4}
+		{9C883692-7F43-4E72-8610-AB1996BED8BC} = {5DBC44B8-5B92-4504-8B8F-91A1672251E6}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {1B8CD55B-BEF0-42D1-936A-BC1FB5D02CE2}

docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs

@@ -9,18 +9,18 @@ public class NavigationStore
 	private static Navigation? _navigation;
 
 	private static NavigationCategory GettingStartedCategory =>
-		new NavigationCategory( "Getting Started", Icons.Rounded.AutoStories )
+		new NavigationCategory( "Getting Started" )
 			.Add( new( "Overview" ) )
 			.Add( new( "Installation" ) );
 
 	private static NavigationCategory ThemingCategory =>
-		new NavigationCategory( "Theming", Icons.Rounded.DesignServices )
+		new NavigationCategory( "Theming" )
 			.Add( new( "Design Tokens", PageStatus.New ) )
 			.Add( new( "Customization", PageStatus.Updated ) )
 			.Add( new( "Dark Mode", PageStatus.New ) );
 
 	private static NavigationCategory ComponentsCategory =>
-		new NavigationCategory( "Components", Icons.Rounded.Joystick )
+		new NavigationCategory( "Components" )
 			.Add( new( nameof( LumexAccordion ) ) )
 			.Add( new( nameof( LumexAlert ), PageStatus.New ) )
 			.Add( new( nameof( LumexAvatar ), PageStatus.New ) )
@@ -34,7 +34,6 @@ public class NavigationStore
 			.Add( new( nameof( LumexDataGrid<T> ) ) )
 			.Add( new( nameof( LumexDivider ) ) )
 			.Add( new( nameof( LumexDropdown ) ) )
-			.Add( new( nameof( LumexIcon ) ) )
 			.Add( new( nameof( LumexLink ) ) )
 			.Add( new( nameof( LumexListbox<T> ) ) )
 			.Add( new( nameof( LumexNavbar ) ) )
@@ -50,7 +49,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexTooltip ), PageStatus.New ) );
 
 	private static NavigationCategory ComponentsApiCategory =>
-		new NavigationCategory( "Components API", Icons.Rounded.Manufacturing )
+		new NavigationCategory( "Components API" )
 			.Add( new( nameof( LumexAccordion ) ) )
 			.Add( new( nameof( LumexAccordionItem ) ) )
 			.Add( new( nameof( LumexAvatar ) ) )
@@ -74,7 +73,6 @@ public class NavigationStore
 			.Add( new( nameof( LumexDropdownMenu ) ) )
 			//.Add( nameof( LumexInputBase<T> ) )
 			//.Add( nameof( LumexInputFieldBase<T> ) )
-			.Add( new( nameof( LumexIcon ) ) )
 			.Add( new( nameof( LumexLink ) ) )
 			.Add( new( nameof( LumexListbox<T> ) ) )
 			.Add( new( nameof( LumexListboxItem<T> ) ) )

docs/LumexUI.Docs.Client/Common/Navigation/Types.cs

@@ -13,12 +13,12 @@ public Navigation Add( NavigationCategory category )
     }
 }
 
-public class NavigationCategory( string name, string icon )
+public class NavigationCategory( string name, string? icon = null )
 {
     private readonly List<NavigationItem> _items = [];
 
     public string Name { get; } = name;
-    public string Icon { get; } = icon;
+    public string? Icon { get; } = icon;
     public IEnumerable<NavigationItem> Items => _items.AsEnumerable();
 
     public NavigationCategory Add( NavigationItem item )

docs/LumexUI.Docs.Client/Components/Callout.razor

@@ -1,7 +1,9 @@
 @namespace LumexUI.Docs.Client.Components
 
+@using LumexUI.Shared.Icons
+
 <div class="@BaseClass">
-    <LumexIcon Icon="@_icon" Class="@IconClass" />
+    <DynamicIcon Type="@_icon" class="@IconClass" />
     <p>@ChildContent</p>
 </div>
 
@@ -32,17 +34,17 @@
         .Add( Classes?.Icon )
         .ToString();
 
-    private string _icon = default!;
+    private Type _icon = default!;
 
     protected override void OnInitialized()
     {
         _icon = Variant switch
         {
-            CalloutVariant.Info => Icons.Rounded.Info,
-            CalloutVariant.Warning => Icons.Rounded.Warning,
-            CalloutVariant.Danger => Icons.Rounded.Dangerous,
-            CalloutVariant.Success => Icons.Rounded.CheckCircle,
-            CalloutVariant.Tip => Icons.Rounded.EmojiObjects,
+            CalloutVariant.Info => typeof( InfoIcon ),
+            CalloutVariant.Warning => typeof( ShieldAlertIcon ),
+            CalloutVariant.Danger => typeof( OctagonAlertIcon ),
+            CalloutVariant.Success => typeof( CircleCheckIcon ),
+            CalloutVariant.Tip => typeof( InfoIcon ),
             _ => throw new NotImplementedException()
         };
     }

docs/LumexUI.Docs.Client/Components/ComponentLinks.razor

@@ -5,7 +5,7 @@
     {
         <LumexButton As="a"
                      Size="@Size.Small"
-                     StartContent="@BlazorIcon"
+                     StartContent="@_blazorIcon"
                      Class="bg-default-100 text-default-700 text-small"
                      href="https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/?view=aspnetcore-8.0#client-and-server-rendering-concepts"
                      target="_blank"
@@ -16,7 +16,7 @@
 
     <LumexButton As="a"
                  Size="@Size.Small"
-                 StartContent="@GithubIcon"
+                 StartContent="@_githubIcon"
                  Class="bg-default-100 text-default-700 text-small"
                  href="@($"{Constants.GitHub.ComponentPath}/{ComponentName}")"
                  target="_blank"
@@ -26,7 +26,7 @@
 
     <LumexButton As="a"
                  Size="@Size.Small"
-                 StartContent="@GithubIcon"
+                 StartContent="@_githubIcon"
                  Class="bg-default-100 text-default-700 text-small"
                  href="@($"{Constants.GitHub.ComponentStylesPath}/{ComponentName}.cs")"
                  target="_blank"
@@ -39,13 +39,6 @@
     [Parameter, EditorRequired] public string ComponentName { get; set; } = default!;
     [Parameter] public bool IsServer { get; set; }
 
-    private static readonly RenderFragment BlazorIcon =
-        @<LumexIcon Icon="@Icons.Brands.Blazor"
-                    Size="@new("20")"
-                    viewBox="-10 -38 340 340" />;
-
-    private static readonly RenderFragment GithubIcon =
-        @<LumexIcon Icon="@Icons.Brands.GitHub"
-                    Size="@new("20")"
-                    viewBox="0 0 24 24" />;
+    private readonly RenderFragment _blazorIcon = @<BlazorIcon Size="18" />;
+    private readonly RenderFragment _githubIcon = @<GithubIcon Size="16" />;
 }

docs/LumexUI.Docs.Client/Components/DocsFooter.razor

@@ -10,16 +10,14 @@
             <LumexLink Href="https://github.com/LumexUI/lumexui"
                        External="@true"
                        Class="p-1 text-default-600">
-                <LumexIcon Icon="@Icons.Brands.GitHub"
-                           viewBox="0 0 24 24" />
+                <GithubIcon Size="20" />
                 <span class="sr-only">GitHub</span>
             </LumexLink>
 
             <LumexLink Href="https://discord.gg/jjgMz3apcb"
                        External="@true"
                        Class="p-1 text-default-600">
-                <LumexIcon Icon="@Icons.Brands.Discord"
-                           viewBox="0 0 24 24" />
+                <DiscordIcon Size="20" />
                 <span class="sr-only">Discord</span>
             </LumexLink>
         </div>

docs/LumexUI.Docs.Client/Components/DocsSection.razor

@@ -1,6 +1,8 @@
 @namespace LumexUI.Docs.Client.Components
 @inject NavigationManager NavigationManager
 
+@using LumexUI.Shared.Icons
+
 <CascadingValue TValue="DocsSection" Value="@this" IsFixed="@true">
     <LumexComponent As="@(IsSubsection ? "h3" : "h2")"
                     id="@_id">
@@ -9,8 +11,7 @@
                    Class="border-none">
             @Title
             <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-xs ring ring-foreground-900/10 hover:ring-orange-200 hover:bg-orange-50 hover:text-orange-500">
-                <LumexIcon Icon="@Icons.Rounded.Link"
-                           Size="@new("16")" />
+                <Link2Icon Size="16" />
             </span>
         </LumexLink>
     </LumexComponent>

docs/LumexUI.Docs.Client/Components/Header.razor

@@ -47,7 +47,7 @@
             <LumexLink Href="https://github.com/LumexUI/lumexui"
                        External="@true"
                        Class="text-foreground-400 hover:text-foreground-600">
-                <LumexIcon Icon="@Icons.Brands.GitHub" viewBox="0 0 24 24" />
+                <GithubIcon Size="20" />
             </LumexLink>
         </LumexNavbarItem>
     </text>;

docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor

@@ -18,29 +18,20 @@
                         <LumexLink Href="https://dotnet.microsoft.com/en-us/download"
                                    External="@true">
                             .NET SDK 8
-                            <LumexIcon Icon="@Icons.Rounded.OpenInNew"
-                                       Size="@new("16")"
-                                       Class="mx-1 text-orange-400" />
                         </LumexLink>
                         or later
                     </li>
                     <li>
                         <LumexLink Href="https://tailwindcss.com"
                                    External="@true">
                             Tailwind CSS 4.0
-                            <LumexIcon Icon="@Icons.Rounded.OpenInNew"
-                                       Size="@new("16")"
-                                       Class="mx-1 text-orange-400" />
                         </LumexLink>
                     </li>
                     <li>
                         An existing Blazor project or create
                         <LumexLink Href="https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro"
                                    External="@true">
                             a new one
-                            <LumexIcon Icon="@Icons.Rounded.OpenInNew"
-                                       Size="@new("16")"
-                                       Class="mx-1 text-orange-400" />
                         </LumexLink>
                     </li>
                 </ul>

docs/LumexUI.Docs.Client/Components/NavMenu.razor

@@ -17,7 +17,6 @@
     {
         <li>
             <div class="flex items-center gap-2 mb-3 text-foreground">
-                <LumexIcon Icon="@category.Icon" Size="@new("20")" />
                 <h5 class="text-foreground-900 font-semibold">
                     @category.Name
                 </h5>

docs/LumexUI.Docs.Client/Components/PreviewCode.razor

@@ -11,16 +11,17 @@
         <div class="flex items-center justify-end">
             <LumexButton Size="@Size.Small"
                          OnClick="@Expand"
-                         Class="h-5 px-2 me-1 rounded-full bg-orange-50 border border-orange-300 text-orange-500 text-[0.625rem]">
+                         Class="h-6 px-2 me-1 rounded-full bg-orange-50 border border-orange-300 text-orange-500 text-[11px]">
                 @(_expanded ? "Collapse code" : "Expand code")
             </LumexButton>
-            <LumexButton Size="@Size.Small"
+            <LumexButton IconOnly="@true"
+                         Size="@Size.Small"
                          Variant="@Variant.Light"
-                         OnClick="@CopyToClipboard"
-                         Class="h-6 w-6 min-w-6 px-0">
-                <LumexIcon Icon="@(_copied ? Icons.Rounded.Check : Icons.Rounded.ContentCopy)"
-                           Size="@new("16")"
-                           Class="text-foreground-500" />
+                         OnClick="@CopyToClipboard">
+                @(_copied
+                    ? @<CheckIcon Size="16" class="text-foreground-500" />
+                    : @<CopyIcon Size="16" class="text-foreground-500" />
+                )
             </LumexButton>
         </div>
     </div>

docs/LumexUI.Docs.Client/Components/QuickLink.razor

@@ -1,9 +1,11 @@
 @namespace LumexUI.Docs.Client.Components
 
+@using LumexUI.Shared.Icons
+
 <li class="relative flex flex-col items-start p-1">
     <div class="peer flex items-end gap-3 mb-3">
         <div class="flex items-center justify-center size-8 rounded-xl bg-indigo-50/75 text-indigo-500 border border-indigo-300 ring-2 ring-indigo-100">
-            <LumexIcon Icon="@Icon" />
+            <DynamicIcon Type="@Icon" Size="20" />
         </div>
         <h3 class="font-semibold text-foreground-900">
             <LumexLink Href="@Link"
@@ -22,7 +24,7 @@
 </li>
 
 @code {
-    [Parameter] public string? Icon { get; set; }
+    [Parameter] public Type? Icon { get; set; }
     [Parameter] public string? Link { get; set; }
     [Parameter] public string? Title { get; set; }
     [Parameter] public string? Description { get; set; }

docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj

@@ -15,6 +15,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
+	  <ProjectReference Include="..\..\src\LumexUI.Shared.Icons\LumexUI.Shared.Icons.csproj" />
 	  <ProjectReference Include="..\..\src\LumexUI\LumexUI.csproj" />
 	</ItemGroup>
 

docs/LumexUI.Docs.Client/Pages/Components/Accordion/Accordion.razor

@@ -80,15 +80,12 @@
 
     <DocsSection Title="Custom Indicator">
         <p>
-            Customize the default expand/collapse indicator icon (such as an arrow).
-            You can achieve this using the <Code>Indicator</Code> parameter.
+            Customize the default expand/collapse indicator icon.
+            You can achieve this using the <Code>IndicatorContent</Code> parameter.
         </p>
         <CustomIndicator />
 
-        <p>
-            Since the <Code>Indicator</Code> parameter is of a delegate type <Code>IndicatorResolver</Code>,
-            you can control the indicator icon based on the expanded state of the accordion item:
-        </p>
+        <p>You can control the indicator icon based on the expanded state of the accordion item:</p>
         <CustomIndicatorState />
     </DocsSection>
 
@@ -164,8 +161,7 @@
     private readonly string[] _apiComponents = new string[]
     {
         nameof(LumexAccordion),
-        nameof(LumexAccordionItem),
-        nameof(LumexIcon)
+        nameof(LumexAccordionItem)
     };
 
     protected override void OnInitialized()

docs/LumexUI.Docs.Client/Pages/Components/Accordion/Examples/CustomIndicator.razor

@@ -1,22 +1,26 @@
-<LumexAccordion>
-    <LumexAccordionItem Id="1"
-                        Title="Globe"
-                        Indicator="@((_) => Icons.Rounded.Globe)">
-        @_content
+@using LumexUI.Shared.Icons
+
+<LumexAccordion>
+    <LumexAccordionItem Id="1" Title="Anchor">
+        <ChildContent>@_content</ChildContent>
+        <IndicatorContent>
+            <LinkIcon />
+        </IndicatorContent>
     </LumexAccordionItem>
-    <LumexAccordionItem Id="2"
-                        Title="Star"
-                        Indicator="@((_) => Icons.Rounded.Star)">
-        @_content
+    <LumexAccordionItem Id="2" Title="Moon">
+        <ChildContent>@_content</ChildContent>
+        <IndicatorContent>
+            <MoonIcon />
+        </IndicatorContent>
     </LumexAccordionItem>
-    <LumexAccordionItem Id="3"
-                        Title="Moon"
-                        Indicator="@((_) =>Icons.Rounded.Bedtime)">
-        @_content
+    <LumexAccordionItem Id="3" Title="Sun">
+        <ChildContent>@_content</ChildContent>
+        <IndicatorContent>
+            <SunIcon />
+        </IndicatorContent>
     </LumexAccordionItem>
 </LumexAccordion>
 
 @code {
-    private RenderFragment _content =>
-    @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
+    private RenderFragment _content = @<text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text>;
 }