Work on material icons pack

MudBlazor · May 29, 2024 · 6cb5ed3 · 6cb5ed3
1 parent ca18af8
commit 6cb5ed3
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 2 deletions.
diff --git a/documentation/material_icons_usage.md b/documentation/material_icons_usage.md
@@ -0,0 +1,50 @@
+# MudBlazor Material Symbols Icons
+[![NuGet version](https://img.shields.io/nuget/v/MudBlazor.FontIcons.MaterialIcons?color=ff4081&label=nuget%20version&logo=nuget&style=flat-square)](https://www.nuget.org/packages/MudBlazor.FontIcons.MaterialIcons/)
+[![NuGet downloads](https://img.shields.io/nuget/dt/MudBlazor.FontIcons.MaterialIcons?color=ff4081&label=nuget%20downloads&logo=nuget&style=flat-square)](https://www.nuget.org/packages/MudBlazor.FontIcons.MaterialIcons/)
+
+## Supported MudBlazor Versions
+
+| MudBlazor.FontIcons.MaterialIcons  |    MudBlazor    |      .NET       |
+| :------------- | :-------------: | :-------------: |
+| 1.0.0  => |     7.0.0-preview.4 =>      |     .NET 7 & NET 8      |
+
+
+To use the icons in your MudBlazor project, you can add the following CSS link to your HTML or Razor layout:
+
+```html
+<link href="_content/MudBlazor.FontIcons.MaterialIcons/css/font.min.css" rel="stylesheet" />
+```
+
+Alternatively, you can use the following CDN links:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />
+```
+
+## Example Usage
+
+To use an icon in your MudBlazor component, you can use the `<MudIcon>` component and specify the icon using the `Icon` parameter. For example:
+
+```html
+<MudIcon Icon="@MudBlazor.FontIcons.MaterialIcons.Outlined.Chat"></MudIcon>
+```
+
+This will render an icon representing a chat, using the Material Icons Outlined style.
+
+## Using Aliases
+
+If you prefer not to use the full qualifier every time, you can create an alias in `_Imports.razor` by adding the following line:
+
+```razor
+@using MaterialIcons = MudBlazor.FontIcons.MaterialIcons
+```
+
+This allows you to access the icons like this:
+
+```html
+<MudIcon Icon="@MaterialIcons.Outlined.Database"></MudIcon>
+```
+
+**NB!** Please note that aliases do not work in normal Razor pages (https://github.com/dotnet/razor/issues/7670)!
diff --git a/documentation/material_symbols_usage.md b/documentation/material_symbols_usage.md
@@ -0,0 +1,50 @@
+# MudBlazor Material Symbols Icons
+[![NuGet version](https://img.shields.io/nuget/v/MudBlazor.FontIcons.MaterialSymbols?color=ff4081&label=nuget%20version&logo=nuget&style=flat-square)](https://www.nuget.org/packages/MudBlazor.FontIcons.MaterialSymbols/)
+[![NuGet downloads](https://img.shields.io/nuget/dt/MudBlazor.FontIcons.MaterialSymbols?color=ff4081&label=nuget%20downloads&logo=nuget&style=flat-square)](https://www.nuget.org/packages/MudBlazor.FontIcons.MaterialSymbols/)
+
+## Supported MudBlazor Versions
+
+| MudBlazor.FontIcons.MaterialSymbols  |    MudBlazor    |      .NET       |
+| :------------- | :-------------: | :-------------: |
+| 1.0.0  => |     7.0.0-preview.4 =>      |     .NET 7 & NET 8      |
+
+
+To use the icons in your MudBlazor project, you can add the following CSS link to your HTML or Razor layout:
+
+```html
+<link href="_content/MudBlazor.FontIcons.MaterialSymbols/css/font.min.css" rel="stylesheet" />
+```
+
+Alternatively, you can use the following CDN links:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />
+```
+
+## Example Usage
+
+To use an icon in your MudBlazor component, you can use the `<MudIcon>` component and specify the icon using the `Icon` parameter. For example:
+
+```html
+<MudIcon Icon="@MudBlazor.FontIcons.MaterialSymbols.Outlined.Database"></MudIcon>
+```
+
+This will render an icon representing a database, using the Material Symbols Outlined style.
+
+## Using Aliases
+
+If you prefer not to use the full qualifier every time, you can create an alias in `_Imports.razor` by adding the following line:
+
+```razor
+@using MaterialSymbols = MudBlazor.FontIcons.MaterialSymbols
+```
+
+This allows you to access the icons like this:
+
+```html
+<MudIcon Icon="@MaterialSymbols.Outlined.Database"></MudIcon>
+```
+
+**NB!** Please note that aliases do not work in normal Razor pages (https://github.com/dotnet/razor/issues/7670)!
diff --git a/src/MudBlazor.FontIcons.MaterialIcons/MudBlazor.FontIcons.MaterialIcons.csproj b/src/MudBlazor.FontIcons.MaterialIcons/MudBlazor.FontIcons.MaterialIcons.csproj
@@ -27,6 +27,7 @@
     <PackageTags>MudBlazor, Material Icons, Material, Icons, Blazor, Blazor Library</PackageTags>
     <PackageIcon>icon.png</PackageIcon>
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
+    <PackageReadmeFile>material_icons_usage.md</PackageReadmeFile>
   </PropertyGroup>
 
   <PropertyGroup>
@@ -45,7 +46,7 @@
       <Pack>True</Pack>
       <PackagePath>\</PackagePath>
     </None>
-    <None Include="..\..\README.md">
+    <None Include="..\..\documentation\$(PackageReadmeFile)">
       <Pack>True</Pack>
       <PackagePath>\</PackagePath>
     </None>

diff --git a/src/MudBlazor.FontIcons.MaterialSymbols/MudBlazor.FontIcons.MaterialSymbols.csproj b/src/MudBlazor.FontIcons.MaterialSymbols/MudBlazor.FontIcons.MaterialSymbols.csproj
@@ -27,6 +27,7 @@
     <PackageTags>MudBlazor, Material Symbols, Material, Symbols, Icons, Blazor, Blazor Library</PackageTags>
     <PackageIcon>icon.png</PackageIcon>
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
+    <PackageReadmeFile>material_symbols_usage.md</PackageReadmeFile>
   </PropertyGroup>
 
   <PropertyGroup>
@@ -45,7 +46,7 @@
       <Pack>True</Pack>
       <PackagePath>\</PackagePath>
     </None>
-    <None Include="..\..\README.md">
+    <None Include="..\..\documentation\$(PackageReadmeFile)">
       <Pack>True</Pack>
       <PackagePath>\</PackagePath>
     </None>