A flexible, beautiful icon family for MudBlazor applications. This library provides seamless integration of Phosphor Icons (1,500+ icons in 6 styles) with MudBlazor components, including 9,000+ type-safe constants and specialized Super Icon components.
$ dotnet add package Phosphor.MudBlazorA flexible, beautiful icon family for MudBlazor applications. This library provides seamless integration of Phosphor Icons with MudBlazor components.
dotnet add package Phosphor.MudBlazor
_Imports.razor:@using Phosphor.MudBlazor
@using static Phosphor.Components.Icons
Add the Phosphor icon fonts to your project and reference them in your App.razor or index.html/_Host.cshtml:
<link rel="stylesheet" href="path/to/phosphor-icons.css">
@* Basic usage *@
<MudIcon Icon="@Phosphor.Regular.Heart" />
<MudIcon Icon="@Phosphor.Bold.Star" />
<MudIcon Icon="@Phosphor.Fill.ThumbsUp" />
@* With MudBlazor components *@
<MudButton StartIcon="@Phosphor.Regular.Airplane" Variant="Variant.Filled">
Book Flight
</MudButton>
@* With color and size *@
<MudIcon Icon="@Phosphor.Regular.Radioactive"
Color="Color.Warning"
Size="Size.Large" />
Phosphor Icons come in six distinct styles:
<MudIcon Icon="@Phosphor.Thin.Heart" /> <!-- Thin -->
<MudIcon Icon="@Phosphor.Light.Heart" /> <!-- Light -->
<MudIcon Icon="@Phosphor.Regular.Heart" /> <!-- Regular (default) -->
<MudIcon Icon="@Phosphor.Bold.Heart" /> <!-- Bold -->
<MudIcon Icon="@Phosphor.Fill.Heart" /> <!-- Fill -->
<MudIcon Icon="@Phosphor.Duotone.Heart" /> <!-- Duotone -->
Super Icons are specialized components that provide parameterized icon selection for related icon sets:
Display dice with configurable values and styles:
<SuperDiceIcon Value="DiceValue.Six" Weight="IconWeight.Bold" />
<SuperDiceIcon Value="DiceValue.Three" Weight="IconWeight.Regular" />
Show battery levels with different charge states:
<SuperBatteryIcon Level="BatteryLevel.Full" Weight="IconWeight.Fill" />
<SuperBatteryIcon Level="BatteryLevel.Low" Weight="IconWeight.Regular" />
All Super Icons inherit from SuperIcon and support the Weight parameter to change icon styles dynamically.
<MudButton StartIcon="@Phosphor.Regular.Download" Color="Color.Primary">
Download
</MudButton>
<MudIconButton Icon="@Phosphor.Bold.Trash" Color="Color.Error" />
<MudNavLink Icon="@Phosphor.Regular.House" Href="/">Home</MudNavLink>
<MudNavLink Icon="@Phosphor.Regular.Gear" Href="/settings">Settings</MudNavLink>
<MudIcon Icon="@Phosphor.Regular.Warning" Color="Color.Warning" />
<MudIcon Icon="@Phosphor.Regular.CheckCircle" Color="Color.Success" />
<MudIcon Icon="@Phosphor.Regular.Info" Color="Color.Info" />
<MudIcon Icon="@Phosphor.Regular.Star" Size="Size.Small" />
<MudIcon Icon="@Phosphor.Regular.Star" Size="Size.Medium" />
<MudIcon Icon="@Phosphor.Regular.Star" Size="Size.Large" />
<MudIcon Icon="@Phosphor.Regular.Star" Style="font-size: 4rem;" />
Phosphor/
├── src/
│ ├── Phosphor.MudBlazor/ # Main library package
│ │ ├── Components/ # Super Icon components
│ │ ├── Abstractions/ # Base classes and interfaces
│ │ └── Models/ # Enums and models
│ ├── Phosphor/ # Demo web application
│ │ └── Components/Pages/ # Example pages
│ └── Phosphor.UnitTests/ # Unit tests
├── build/ # NUKE build configuration
├── input/ # Source icon fonts
├── output/ # Generated Icons.cs files
└── artifacts/ # Build outputs
This project uses NUKE as the build system.
# Clone the repository
git clone https://github.com/yourusername/Phosphor.git
cd src/Phosphor
# Generate Icons.cs from font files
./build.sh GenerateIconsClass # Linux/macOS
./build.cmd GenerateIconsClass # Windows (CMD)
./build.ps1 GenerateIconsClass # Windows (PowerShell)
# Build the solution
dotnet build
# Run tests
dotnet test
The build process will:
input/fonts/{style}/selection.json filesoutput/Icons.cscd src/Phosphor
dotnet run
Then navigate to https://localhost:5001 to see the demo application.
The icon constants are automatically generated from the Phosphor icon fonts (v2.1.2) using a custom NUKE build script (build/Build.cs). The build script:
input/fonts/{style}/selection.json files for all 6 stylesthumbs-up) to PascalCase properties (e.g., ThumbsUp)"ph-bold ph-thumbs-up")output/ directoryTo update to a newer version of Phosphor Icons:
input/fonts/ directory./build.sh GenerateIconsClass to regenerateTo create a NuGet package:
# Generate icons, build, and pack (creates artifacts/Phosphor.MudBlazor.{version}.nupkg)
./build.sh Pack
# Publish to NuGet.org
dotnet nuget push artifacts/Phosphor.MudBlazor.{version}.nupkg --api-key YOUR_API_KEY --source https://api.nuget.org/v3/index.json
The package includes:
The generated file structure:
namespace Phosphor.Components
{
public static class Icons
{
public static class Phosphor
{
public static class Bold
{
public const string Heart = "ph-bold ph-heart";
// ... more icons
}
public static class Regular
{
public const string Heart = "ph-regular ph-heart";
// ... more icons
}
// ... other styles
}
}
}
Contributions are welcome! Please feel free to submit a Pull Request.
Please check the LICENSE file for details.