A UWP library that provides easy access to Microsoft's Fluent System Icons
In your app project, install the Fluent.Icons
NuGet package. (Note that it is currently a prerelease build, so if you are searching for it in the NuGet Package Manager, make sure you have "Include prerelease" checked.)
You can install the latest version using the following command in the NuGet Package Manager:
Install-Package Fluent.Icons
- Build the solution in
Release
mode andAny CPU
- Open Command Prompt in the solution directory and run
nuget pack Fluent.Icons/Fluent.Icons.csproj -properties Configuration=Release
- Go to the Package Manager Console and set the default project to FluentSystemTestApp. Then run
Install-Package "{repo_path}\FluentSystemIconsUWP\Fluent.Icons.{version}.nupkg"
(change{repo_path}
to where the solution folder is and{version}
to the package version). - Test the package by deploying FluentSystemTestApp.proj
- Clone the repo
- Add a reference to
Fluent.Icons.csproj
. You don't need the other two projects to build it. - Add
xmlns:fluent="using:Fluent.Icons"
to your pages.
The following examples assume that you have imported the Fluent.Icons
namespace as follows.
xmlns:fluent="using:Fluent.Icons"
using Fluent.Icons;
Use a Fluent Icon as a button's content.
<Button>
<fluent:FluentSymbolIcon Symbol="AddCircle24"/>
</Button>
myButton.Content = new FluentSymbolIcon(FluentSymbol.AddCircle24);
Use Fluent Icons in a NavigationView's MenuItems.
<NavigationView.MenuItems>
<NavigationViewItem Content="Navigate">
<NavigationViewItem.Icon>
<FluentIconElement Symbol="Directions24" />
</NavigationViewItem.Icon>
</NavigationViewItem>
</NavigationView.MenuItems>
myNavView.MenuItems.Add(new NavigationViewItem()
{
Icon = new FluentIconElement(FluentSymbol.Directions24);
});
Use a Fluent Icon in an AppBarButton.
<AppBarButton>
<AppBarButton.Icon>
<FluentIconElement Symbol="Star24" />
</AppBarButton.Icon>
</AppBarButton>
myAppBarButton.Icon = new FluentIconElement(FluentSymbol.Star24);
Show a list of all available Fluent Icons.
<ListView ItemsSource="{x:Bind fluent:FluentSymbolIcon.AllFluentIcons.Keys}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="fluent:FluentSymbol">
<ListViewItem>
<StackPanel Spacing="10" Orientation="Horizontal">
<fluent:FluentSymbolIcon Symbol="{x:Bind}"/>
<TextBlock Text="{x:Bind}"/>
</StackPanel>
</ListViewItem>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Get the Windows.UI.Xaml.Media.Geometry
object that represents an icon
FluentSymbolIcon.GetPathData(FluentSymbol.Home);
Get a PathIcon object that represents an icon
FluentSymbolIcon.GetPathIcon(FluentSymbol.Home);
Get the raw SVG path data for a given icon
FluentSymbolIcon.AllFluentIcons[FluentSymbol.Home];