A UWP library that provides easy access to the Fluent System Icons at https://github.com/microsoft/fluentui-system-icons
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
Release
mode and Any CPU
nuget pack Fluent.Icons/Fluent.Icons.csproj -properties Configuration=Release
Install-Package "{repo_path}\FluentSystemIconsUWP\Fluent.Icons.{version}.nupkg"
(change {repo_path}
to where the solution folder is and {version}
to the package version).Fluent.Icons.csproj
. You don't need the other two projects to build it.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];