Agent skill
resolving-icon-font-inheritance
Resolves text font inheritance issues when using Segoe Fluent Icons in WPF CustomControl. Use when TextBlocks inherit icon fonts unexpectedly within ControlTemplate.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/resolving-icon-font-inheritance-christian289-dotnet-with-claudeco-2
SKILL.md
WPF CustomControl Icon Font Inheritance Issue Resolution
Problem Scenario
When using Segoe Fluent Icons font in WPF CustomControl, TextBlocks within the same ControlTemplate inherit the icon font, causing text to render incorrectly.
Symptoms
- Button text displays as square boxes (□) or strange symbols
- Icons display correctly but regular text doesn't render
Cause
WPF's FontFamily is inherited to child elements following the Visual Tree. When FontFamily="Segoe Fluent Icons" is set on a TextBlock for icons within a ControlTemplate, other TextBlocks in the same container may inherit this font.
Solution
Explicitly Specify FontFamily on Text-Displaying Elements
<!-- IconButton ControlTemplate Example -->
<ControlTemplate TargetType="{x:Type local:IconButton}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="{TemplateBinding Orientation}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<!-- Icon: Use Segoe Fluent Icons -->
<TextBlock x:Name="PART_Icon"
Text="{TemplateBinding Icon}"
FontFamily="Segoe Fluent Icons, Segoe MDL2 Assets"
FontSize="{TemplateBinding IconSize}"
Foreground="{TemplateBinding Foreground}" />
<!-- Text: Explicitly specify Segoe UI (Important!) -->
<TextBlock x:Name="PART_Text"
Text="{TemplateBinding Text}"
FontFamily="Segoe UI"
FontSize="12"
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" />
</StackPanel>
</Border>
</ControlTemplate>
Key Points
- Apply icon font only to specific element: Specify
Segoe Fluent Iconsonly onPART_Icon - Explicitly specify FontFamily on text elements:
FontFamily="Segoe UI"is required onPART_Text - Don't set FontFamily on parent containers: Setting FontFamily on Border or StackPanel inherits to all children
Applicable Controls
- IconButton (icon + text button)
- IconToggleButton (toggleable icon button)
- NavigationButton (navigation menu item)
- Any other CustomControl using icons and text together
Related Icon Fonts
| Font Name | Windows Version | Purpose |
|---|---|---|
Segoe Fluent Icons |
Windows 11+ | Latest Fluent Design icons |
Segoe MDL2 Assets |
Windows 10+ | Default system icons |
Fallback Pattern
FontFamily="Segoe Fluent Icons, Segoe MDL2 Assets"
Specify fallback font for Windows 10 compatibility
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?