Ghost1372

everything can be handy

ThemedIcon

Property

Name
FilledIconData
OutlineIconData
Color
IconType
IconColorType
IconSize
IsToggled
IsFilled
IsHighContrast
Layers
ToggleBehavior

Example

1
<dev:ThemedIcon Style="{StaticResource App.ThemedIcons.Cut}" />

Available Styles

Name
App.ThemedIcons.Actions.Copying
App.ThemedIcons.Actions.Moving
App.ThemedIcons.Actions.Extracting
App.ThemedIcons.Actions.Recycle
App.ThemedIcons.Actions.Delete
App.ThemedIcons.Actions.Success
App.ThemedIcons.Actions.Paused
App.ThemedIcons.Actions.ErrorInfo
App.ThemedIcons.Actions.Eject
App.ThemedIcons.NavForward
App.ThemedIcons.NavUp
App.ThemedIcons.NavBack
App.ThemedIcons.Refresh
App.ThemedIcons.NavForward.12
App.ThemedIcons.NavUp.12
App.ThemedIcons.NavBack.12
App.ThemedIcons.Refresh.12
App.ThemedIcons.Cut
App.ThemedIcons.Copy
App.ThemedIcons.Paste
App.ThemedIcons.PasteShortcut
App.ThemedIcons.CopyAsPath
App.ThemedIcons.Rename
App.ThemedIcons.Delete
App.ThemedIcons.RestoreDeleted
App.ThemedIcons.SelectAll
App.ThemedIcons.SelectNone
App.ThemedIcons.SelectInvert
App.ThemedIcons.SelectMode
App.ThemedIcons.SelectMultiple
App.ThemedIcons.Info
App.ThemedIcons.Properties
App.ThemedIcons.TagEdit
App.ThemedIcons.Tag
App.ThemedIcons.TagMultiple
App.ThemedIcons.CompactOverlay
App.ThemedIcons.CompactOverlayExit
App.ThemedIcons.Share
App.ThemedIcons.File
App.ThemedIcons.Folder
App.ThemedIcons.Zip
App.ThemedIcons.Shortcut
App.ThemedIcons.URL
App.ThemedIcons.CopyTo
App.ThemedIcons.MoveTo
App.ThemedIcons.Settings
App.ThemedIcons.More
App.ThemedIcons.AppUpdateAvailable
App.ThemedIcons.v4.AppUpdateAvailable
App.ThemedIcons.v4.AppUpdated
App.ThemedIcons.AppUpdated
App.ThemedIcons.AppUpdatedBox
App.ThemedIcons.Omnibar.Path
App.ThemedIcons.Omnibar.Commands
App.ThemedIcons.Omnibar.Search
App.ThemedIcons.Omnibar.Search.Advanced
App.ThemedIcons.Favorite
App.ThemedIcons.FavoriteAdd
App.ThemedIcons.FavoritePin
App.ThemedIcons.FavoritePinRemove
App.ThemedIcons.Git.Pull
App.ThemedIcons.Git.Push
App.ThemedIcons.Git.Sync
App.ThemedIcons.Git.Commit
App.ThemedIcons.Git.Issue
App.ThemedIcons.Git.Branch
App.ThemedIcons.Git.BranchNew
App.ThemedIcons.Git.Stash
App.ThemedIcons.Git
App.ThemedIcons.Git.Compare
App.ThemedIcons.Grouping
App.ThemedIcons.Sorting
App.ThemedIcons.Filter
App.ThemedIcons.ImageRotate.CW
App.ThemedIcons.ImageRotate.ACW
App.ThemedIcons.SetWallpaper.16
App.ThemedIcons.StatusCenter
App.ThemedIcons.AltDataStream
App.ThemedIcons.New.Item
App.ThemedIcons.New.File
App.ThemedIcons.New.Window
App.ThemedIcons.New.Tab
App.ThemedIcons.New.Folder
App.ThemedIcons.NewPane
App.ThemedIcons.NewTerminalPane
App.ThemedIcons.Open
App.ThemedIcons.OpenInTerminal
App.ThemedIcons.OpenWith
App.ThemedIcons.OpenFile
App.ThemedIcons.OpenInWindow
App.ThemedIcons.OpenInTab
App.ThemedIcons.PanelLeft
App.ThemedIcons.PanelLeftClose
App.ThemedIcons.PanelRight
App.ThemedIcons.PanelRightClose
App.ThemedIcons.PanelBottom
App.ThemedIcons.PanelBottomClose
App.ThemedIcons.Properties.General
App.ThemedIcons.Properties.Security
App.ThemedIcons.Properties.Info
App.ThemedIcons.Properties.Compatability
App.ThemedIcons.Properties.Shortcut
App.ThemedIcons.Properties.Signatures
App.ThemedIcons.Properties.Certificates
App.ThemedIcons.Properties.Hashes
App.ThemedIcons.Settings.General
App.ThemedIcons.Settings.Appearance
App.ThemedIcons.Settings.Layout
App.ThemedIcons.Settings.FilesFolders
App.ThemedIcons.Settings.KeyboardActions
App.ThemedIcons.Settings.General.Toolbar
App.ThemedIcons.Settings.General.Statusbar
App.ThemedIcons.Settings.General.ContextMenu
App.ThemedIcons.Settings.General.BGColor
App.ThemedIcons.Settings.General.Theme
App.ThemedIcons.Settings.General.LayoutSync
App.ThemedIcons.Settings.General.EditColumns
App.ThemedIcons.Settings.General.SettingsFile
App.ThemedIcons.Settings.General.FilesDefault
App.ThemedIcons.Settings.General.Libraries
App.ThemedIcons.Settings.General.DualPane
App.ThemedIcons.Settings.General.Language
App.ThemedIcons.Settings.General.TimeDate
App.ThemedIcons.Settings.General.Startup
App.ThemedIcons.Settings.General.Widgets
App.ThemedIcons.Settings.General.BackdropMaterial
App.ThemedIcons.Settings.General.BackgroundFolder
App.ThemedIcons.Settings.General.SetLayout
App.ThemedIcons.Settings.General.FileExt
App.ThemedIcons.Settings.General.Thumbnails
App.ThemedIcons.Settings.General.Checkmarks
App.ThemedIcons.Settings.General.OpenItems
App.ThemedIcons.Settings.General.FileExtWarning
App.ThemedIcons.Settings.General.SelectHover
App.ThemedIcons.Settings.General.Click
App.ThemedIcons.Settings.General.Scroll
App.ThemedIcons.Settings.General.FolderSize
App.ThemedIcons.Settings.General.Edit
App.ThemedIcons.Settings.General.OpenWith
App.ThemedIcons.Settings.General.Connections
App.ThemedIcons.Settings.General.Export
App.ThemedIcons.Settings.General.Import
App.ThemedIcons.Settings.General.RunInBackground
App.ThemedIcons.Settings.General.OverflowMore
App.ThemedIcons.Settings.General.DeleteConfirm
App.ThemedIcons.Settings.General.Git
App.ThemedIcons.Settings.General.FileOpen
App.ThemedIcons.Settings.General.Docs
App.ThemedIcons.Settings.General.Questions
App.ThemedIcons.Settings.General.Translate
App.ThemedIcons.Settings.General.GitHub
App.ThemedIcons.Settings.General.Privacy
App.ThemedIcons.IconSize.Compact
App.ThemedIcons.IconSize.Small
App.ThemedIcons.IconSize.Medium
App.ThemedIcons.IconSize.Large
App.ThemedIcons.IconSize.ExtraLarge
App.ThemedIcons.IconLayout.Tiles
App.ThemedIcons.IconLayout.List
App.ThemedIcons.IconLayout.Grid.28
App.ThemedIcons.IconLayout.List.28
App.ThemedIcons.IconLayout.Details.28
App.ThemedIcons.IconLayout.Tiles.28
App.ThemedIcons.IconLayout.Columns.28
App.ThemedIcons.IconSize.Compact.28
App.ThemedIcons.IconSize.Small.28
App.ThemedIcons.Status.Added
App.ThemedIcons.Status.Removed
App.ThemedIcons.Status.Warning
App.ThemedIcons.Status.Deleted
App.ThemedIcons.Status.Renamed
App.ThemedIcons.Status.Modified
App.ThemedIcons.Status.Protected
App.ThemedIcons.Status.Locked
App.ThemedIcons.Status.Hidden
App.ThemedIcons.Status.Syncing
App.ThemedIcons.Status.Cloud
App.ThemedIcons.Status.Unavailable
App.ThemedIcons.Panes.Vertical
App.ThemedIcons.Panes.Single
App.ThemedIcons.Panes.Horizontal
App.ThemedIcons.Panes.Left
App.ThemedIcons.Panes.Right
App.ThemedIcons.Panes.Bottom
App.ThemedIcons.Panes.Top

Create Custom Icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Style x:Key="MyRefreshStyle" TargetType="local:ThemedIcon" BasedOn="{StaticResource DefaultThemedIconStyle}">


    <Setter Property="IconSize" Value="16" />

    <Setter Property="OutlineIconData" Value="m2,8c0-3.31,2.69-6,6-6,1.78,0,3.37.77,4.47,2h-1.97c-.28,0-.5.22-.5.5s.22.5.5.5h3c.28,0,.5-.22.5-.5V1.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v1.6c-1.27-1.3-3.04-2.1-5-2.1-3.87,0-7,3.13-7,7s3.13,7,7,7,7-3.13,7-7c0-.18,0-.36-.02-.54-.02-.28-.26-.48-.54-.46-.28.02-.48.26-.46.54.01.15.02.31.02.46,0,3.31-2.69,6-6,6s-6-2.69-6-6Z" />
    <Setter Property="FilledIconData" Value="m2,8c0-3.31,2.69-6,6-6,1.52,0,2.91.57,3.97,1.5h-1.22c-.41,0-.75.34-.75.75s.34.75.75.75h3c.41,0,.75-.34.75-.75V1.25c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.16c-1.33-1.19-3.08-1.91-5-1.91C3.86.5.5,3.86.5,8s3.36,7.5,7.5,7.5,7.5-3.36,7.5-7.5c0-.09,0-.19,0-.28-.02-.41-.36-.74-.78-.72-.41.02-.74.36-.72.78,0,.07,0,.15,0,.22,0,3.31-2.69,6-6,6s-6-2.69-6-6Z" />

    <Setter Property="Layers">
        <Setter.Value>
            <local:ThemedIconLayers>
                <local:ThemedIconLayer LayerSize="16"
                                        LayerType="Base"
                                        PathData="m2,8c0-3.31,2.69-6,6-6,1.78,0,3.37.77,4.47,2h-1.97c-.28,0-.5.22-.5.5s.22.5.5.5h3c.28,0,.5-.22.5-.5V1.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v1.6c-1.27-1.3-3.04-2.1-5-2.1-3.87,0-7,3.13-7,7s3.13,7,7,7,7-3.13,7-7c0-.18,0-.36-.02-.54-.02-.28-.26-.48-.54-.46-.28.02-.48.26-.46.54.01.15.02.31.02.46,0,3.31-2.69,6-6,6s-6-2.69-6-6Z" />
            </local:ThemedIconLayers>
        </Setter.Value>
    </Setter>
</Style>

Percentage is a double and should be from 0 to 100.

ThemedIcon

Demo

you can run demo and see this feature.

0%