IconButton

[niels9001]

Settings Expander

Problem Statement

Icon buttons are everywhere across Windows and other OSes. At the moment, it can be pretty painful to create a consistent IconButton that renders the Icon and Content appropriately - resulting in many different implementations and UX inconsistencies.

The challenge however, is that WinUI provides many different Button types:

Button

ToggleButton

DropDownButton

SplitButton

HyperLinkButton

Required XAML to currently do this:

<Button>
     <StackPanel Orientation="Horizontal" Spacing="6">
          <FontIcon Foreground="Blue" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="14" Glyph="&#xF7DB;" />
          <TextBlock Text="Text" />
     </StackPanel>
</Button>

As you can see, this can be quite verbose - not easy to re-use and prone to (layout) issues (like picking the wrong spacing).

Inspiration

Many community developers have worked on their own implementations of this control/pattern.

Proposed Solution

It'd be great to make it easy for developers to consistently add an icon to a specific button type. Ideally, we'd have IconButton, IconToggleButton, etc. controls - but for the sake of maintenance, I'm not sure if it makes sense to introduce new button types for all of these variants?

Alternatively, we could create a new helper control that can be set as the content of a Button type?

Properties that come to mind:

Property name	Type	Comments
Content	object
Icon	IconElement	This allows developers to use text-based icons, but also Bitmaps!
IconAlignment	enum	Ability to change the position of the Icon - Left/Top/Right/Bottom - defaults to Left.
IconForeground	Color	Ability to customize and provide a different color icon (this is common in certain first-party applications).
IconSize	double	Ability to tweak the (font)size of the Icon. Defaults to the Con

XAML markup:

<Button>
    <IconContentControl Icon="&#xF7DB;" Content="Text" IconOrientation="Left" IconForeground="Blue"/>
</Button>

results in:

An additional benefit, is that you can quickly move this around in anything that takes an object, e.g.:

In a PivotItem.Header:

ComboBoxItem.Content:

Open Questions

API Reference Docs

References

Windows Visual Library

[michael-hawker]

Yeah, we definitely want to support alignment and size. Some folks may just want a Button with just an icon too. Definitely see a lot of folks wanting some simpler solution here to make it easier to be consistent with this across apps.

Wonder if we want to support icon sizes like Small and Large for buttons or standard button sizes or something. Though that would be the thing is what would the default button behavior be. Like if someone wants a small square button with just an icon in it..,

FYI @JustinXinLiu as well for his thoughts.