Feature Image

Icons Made Easy for .NET MAUI App Actions

Icons Made Easy for .NET MAUI App Actions

App Actions allow developers to add shortcuts to an App's launch icon to invoke custom functionality or deep link into the app.

As part of MAUI Essentials, a simple API is provided that allows the developer to declare App Actions. The API allows you to create the Action with a custom title, and sub-title and set an Icon for the action from the App's resources. However, creating Icons for App Actions can be quite finicky, as if they aren't the correct size and format, they will not render.

Enter AppActions.Icons.Maui. This nuget package provides a set of common icons that you can use in Android, iOS & Windows platforms to quickly add icons to your AppActions with little ceremony.

IconDemo

How to install

  1. Follow the Microsoft .NET MAUI App actions Docs on how to Configure AppActions in your Application.

  2. Install the AppActions.Icons.Maui Nuget package into your MAUI project.

  3. In the ConfigureEssentials() method, call essentials.UseAppActionIcons()

    using AppActions.Icons.Maui;
    
    ...
    
    .ConfigureEssentials(essentials =>
    {
        essentials
            .UseAppActionIcons()
            .AddAppAction("shortcut_1", "Shortcut")
            .OnAppAction(App.HandAppActions)
    });
    

How to use

AppActions.Icons.Maui builds on top of the Essentials AppActions API to try and make life as easy as possible. This means that setting the icon to one of the provided Icons is as easy as passing in one of the options from the AppActionIcon class in place of a string name.

.ConfigureEssentials(essentials =>
{
    essentials
        .UseAppActionIcons()
        .AddAppAction("shortcut_1", "Shortcut", icon: AppActionIcon.Compose)
        .OnAppAction(App.HandAppActions)
});

This code snippet assigns the "Compose" icon and looks like this

ProvidedIconpng

Modify Icon Colors on Android

On Android, the Icons provided are VectorDrawables, this means we can utilise the platform's native features and override the foreground and background colors of the icons.

  1. Open the colors.xml in Platforms > Android > Resources > values

  2. Add the following two color resources and adjust the Hex codes to your desired colors.

    <color name="appActionBackground">#E6DFFC</color>
    <color name="appActionForeground">#512BD4</color>
    

    ProvidedIcon_Color

And that's it! A simple way to add Icons to your AppActions.

As well as the 29 provided icons, this package also allows you to set SF Symbols for your iOS apps which give you even more flexibility. To see how to take advantage of this feature, please visit the Package's GitHub Readme