Uno Chefs Recipe: Serving Up Custom Icons Without Template Headaches

Let’s talk UI. We all know that a clean, intuitive user interface is crucial. It’s the difference between an app people use and an app people love. And a massive part of that visual language? Icons.

But let’s be real. Getting those icons exactly where you want them in XAML hasn’t always been a walk in the park. Need an icon inside a TextBox? Or on a PasswordBox? Traditionally, that often meant diving head-first into the murky depths of ControlTemplate editing. It’s powerful, sure, but it can quickly become a time-sink and a maintenance headache. Let’s face it, sometimes it just feels like overkill for adding a simple visual cue.

What if there was an "easy button"?

Good news: With Uno Themes, there is. We built our new Uno Chefs sample app as a showcase for building real-world, production-ready apps with Uno Platform, and we leaned heavily on Uno Themes to build its beautiful, responsive UI. Today, we’re diving into one specific, super-useful feature: adding icons to controls without the ControlTemplate gymnastics.

Uno Platform is an open-source project that enables cross-platform application development using a single codebase. By leveraging the power of C# and XAML, Uno Platform allows developers to create applications that run on WebAssembly, iOS, Android, macOS, Linux, and Windows.

The secret ingredient: ControlExtensions.Icon

The secret sauce is an attached property provided by the Uno.Themes library: ControlExtensions.Icon.

If you’re new to attached properties, think of them as a way for one class (ControlExtensions in this case) to add extra “hooks” or properties onto another object (like a Button or TextBox), even if that object wasn’t originally designed with them. It’s a powerful XAML concept that Uno Themes uses cleverly.

But here’s the really important part: ControlExtensions.Icon doesn’t work in a vacuum. It works hand-in-hand with the pre-defined styles that Uno Themes provides. When you apply a style like FabStyle or ChefsPrimaryTextBoxStyle to your control, you’re not just getting colours and padding. You’re getting a ControlTemplate that’s already been designed to look for ControlExtensions.Icon and display whatever you put there in the right spot.

				
					<Page ...
      xmlns:ut="using:Uno.Themes">
    <TextBox PlaceholderText="Username"
             Style="{StaticResource ChefsPrimaryTextBoxStyle}"
             Text="{Binding UserCredentials.Username, Mode=TwoWay}">
        <ut:ControlExtensions.Icon>
            <PathIcon Data="{StaticResource Icon_Person_Outline}" />
        </ut:ControlExtensions.Icon>
    </TextBox>

    <PasswordBox PlaceholderText="Password"
                 Style="{StaticResource OutlinedPasswordBoxStyle}">
        <ut:ControlExtensions.Icon>
            <FontIcon Glyph="{StaticResource Icon_Lock}" />
        </ut:ControlExtensions.Icon>
    </PasswordBox>
</Page>

In the Kitchen with Uno Chefs 🧑‍🍳

Talk is cheap, let’s see it in action! In our latest Uno Tech Bite Steve shows us how we used this approach in Uno Chefs to polish the UI.

Boom! By simply declaring our ControlExtensions.Icon, we get those neat visuals. Notice we’re using PathIcon for our custom SVG-based icon and FontIcon for a glyph-based one – both work seamlessly. It’s subtle, but it adds that layer of polish that makes an app feel finished.

Choosing Your Icon Type

As you saw, you have options:

SymbolIcon: Best for standard, common icons provided by the system. Super simple.
FontIcon: Use this when you’re leveraging icon fonts (like Material Icons, Font Awesome, or your own custom font). Great for scalability and easy colour changes.
PathIcon: The go-to for custom vector graphics (SVGs). Offers maximum flexibility for unique branding and shapes.

Pro-Tip: Consistency is key! Define your core icons (especially PathIcon data) in a central ResourceDictionary, just like we did in Uno Chefs. It makes managing and reusing them a breeze.

Next Steps

Adding professional-looking icons shouldn’t be a chore. With Uno Themes and ControlExtensions.Icon, you can elevate your Uno Platform app’s UI quickly and easily.

We highly encourage you to:

Explore the Uno Chefs repo on GitHub to see these examples and many more in a real-world application.
Dive into the Chefs Recipe Book for more details and other available tutorials.
Try it yourself! Grab the latest Uno Platform templates, add the Uno.Themes package, and start styling.