Icon

An icon drawn by name, as uikit:Icon.

ExampleInteractive

Icon — Avalonia UIKit

Live demo unavailable

<StackPanel Spacing="16" HorizontalAlignment="Left">
  <WrapPanel ItemSpacing="12" LineSpacing="12">
    <uikit:Icon Kind="Info" />
    <uikit:Icon Kind="Map" />
    <uikit:Icon Kind="Bot" />
    <uikit:Icon Kind="Github" />
    <uikit:Icon Kind="Calendar" />
    <uikit:Icon Kind="Globe" />
    <uikit:Icon Kind="Heart" />
    <uikit:Icon Kind="Settings" />
    <uikit:Icon Kind="Palette" />
  </WrapPanel>
  <WrapPanel ItemSpacing="12" LineSpacing="12">
    <uikit:Icon Classes="large" Kind="Maximize" Foreground="{DynamicResource UIKit.Green}" />
    <uikit:Icon Classes="large" Kind="Minimize" Foreground="{DynamicResource UIKit.Red}" />
    <uikit:Icon Classes="large" Kind="SortAscending" />
    <Button Classes="ghost small icon-only">
      <uikit:Icon Kind="Heart" />
    </Button>
    <Button Classes="outline">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <uikit:Icon Kind="Search" />
        <TextBlock Text="Search" />
      </StackPanel>
    </Button>
  </WrapPanel>
</StackPanel>

Usage

uikit:Icon draws an icon by name: Kind is one of the IconName values, every icon GPUI Kit ships (browse them on the Icons page). The theme carries the components' icons, and the package's generator adds any other an app names (see Icons). Kind is None by default, which leaves Data to the app. It is a PathIcon, so the size classes of the Icon, Foreground, and the sizes buttons and menus give their icons apply to it the same way. IconNames.ResourceKey gives an icon's geometry resource for code.

Examples

The icons the theme carries, IconNames.Bundled; point at an icon for its name.

GalleryInteractive

Live demo unavailable

<ItemsControl Width="560" HorizontalAlignment="Left" ItemsSource="{x:Static local:IconSamples.All}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel ItemSpacing="4" LineSpacing="4" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate x:DataType="uikit:IconName">
      <Border Width="36" Height="36" CornerRadius="6" Background="Transparent" ToolTip.Tip="{Binding}">
        <uikit:Icon Kind="{Binding}" />
      </Border>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

Icon

#Usage

#Examples

Usage

Examples