diff --git a/documentation/material_icons_usage.md b/documentation/material_icons_usage.md new file mode 100644 index 0000000..4d80e88 --- /dev/null +++ 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 + +``` + +Alternatively, you can use the following CDN links: + +```html + + + +``` + +## Example Usage + +To use an icon in your MudBlazor component, you can use the `` component and specify the icon using the `Icon` parameter. For example: + +```html + +``` + +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 + +``` + +**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 new file mode 100644 index 0000000..120d82b --- /dev/null +++ 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 + +``` + +Alternatively, you can use the following CDN links: + +```html + + + +``` + +## Example Usage + +To use an icon in your MudBlazor component, you can use the `` component and specify the icon using the `Icon` parameter. For example: + +```html + +``` + +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 + +``` + +**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 index 9bbef90..b797f02 100644 --- a/src/MudBlazor.FontIcons.MaterialIcons/MudBlazor.FontIcons.MaterialIcons.csproj +++ b/src/MudBlazor.FontIcons.MaterialIcons/MudBlazor.FontIcons.MaterialIcons.csproj @@ -27,6 +27,7 @@ MudBlazor, Material Icons, Material, Icons, Blazor, Blazor Library icon.png MIT + material_icons_usage.md @@ -45,7 +46,7 @@ True \ - + True \ diff --git a/src/MudBlazor.FontIcons.MaterialSymbols/MudBlazor.FontIcons.MaterialSymbols.csproj b/src/MudBlazor.FontIcons.MaterialSymbols/MudBlazor.FontIcons.MaterialSymbols.csproj index b8b6a1c..61e157d 100644 --- a/src/MudBlazor.FontIcons.MaterialSymbols/MudBlazor.FontIcons.MaterialSymbols.csproj +++ b/src/MudBlazor.FontIcons.MaterialSymbols/MudBlazor.FontIcons.MaterialSymbols.csproj @@ -27,6 +27,7 @@ MudBlazor, Material Symbols, Material, Symbols, Icons, Blazor, Blazor Library icon.png MIT + material_symbols_usage.md @@ -45,7 +46,7 @@ True \ - + True \