using trigger in MaterialDesign:PackIcon Kind="OutLine" in wpf

Question

I am using <MaterialDesign:PackIcon Kind="BugOutline"/> and trying triggers on the same. Motive is to change border color of the MaterialDesign:PackIcon Kind="BugOutLine" on focus

  <Button Margin="10 5" Command={Binding AddBugCommand} ToolTip="Add" Style="{StaticResource MaterialDesignIconButton}">
     <Material:PackIcon Kind="BugOutline"/>
  </Button>

and I have done the following:

<MaterialDesign:PackIcon.Style>
   <Style TargetType="MaterialDesign:PackIcon">
     <Style.Triggers>
       <Triggers Property="IsFocused" Value="True">
          <Setter Property="BorderBrush" Value=""Yellow"/>
          <Setter Propety="BorderThickness" Value="2"/>
       </Triggers>
     </Style.Trigers>
   </Style>
</MaterialDesign:PackIcon.Style>

I also tried creating trigger for button itself by extending already existing style of the button. But it didn't work.

<Button.Style>
   <Style TargetType="{x:Type Button}" BasedOn={StaticResource MaterialDesignIconButton}>
     <Style.Triggers>
       <Trigger Property="IsFocused" Value="True">
           <Setter Property="BorderBrush" Value="Yellow"/>
           <Setter Property="BorderThickness" Value="2"/>
        <Trigger>
     </Style.Triggers>
    </Style>
</Button.Style>

Answer 1

Below you have an example solution.

• I binding the content element (in your case is PackIcon) with the foreground of the button

• I created a style with triggers that change the foreground of the button based on states (IsMouseOver,IsKeyboardFocusWithin).

   <Button VerticalAlignment="Top"
       HorizontalAlignment="Left"
       Width="50"
       Height="50">
   <Button.Content>
       <Path
           Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z "
           Fill="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}} ,Path=Foreground}"
           Margin="1"
           Opacity="1"
           Stretch="Fill" />
   </Button.Content>
   <Button.Style>
       <Style TargetType="{x:Type Button}">
           <Setter Property="Foreground"
                   Value="Red" />
           <Style.Triggers>
               <Trigger Property="IsMouseOver"
                        Value="True">
                   <Setter Property="Foreground"
                           Value="Yellow" />
               </Trigger>
               <Trigger Property="IsKeyboardFocusWithin"
                        Value="True">
                   <Setter Property="Foreground"
                           Value="Green" />
               </Trigger>
               <MultiTrigger>
                   <MultiTrigger.Conditions>
                       <Condition Property="IsMouseOver" Value="True"/>
                       <Condition Property="IsKeyboardFocusWithin" Value="True"/>
                   </MultiTrigger.Conditions>
                   <MultiTrigger.Setters>
                       <Setter Property="Foreground"
                               Value="Yellow" />
                   </MultiTrigger.Setters>
               </MultiTrigger>
           </Style.Triggers>
       </Style>
   </Button.Style>
  

If you want to adapt my example, please don't forget to add the BaseOn property to the style, change Path to PackIcon and adjust the necessary brushes when is triggered.