TabControl | TabItem Icon + Header Text

[ZeroByteZDev]

I'm having problem to tabcontrol. I wanted to make tabitem that has icon and a text next to it like this

This is my current tab right now

            <materialDesign:Card>
                <TabControl HorizontalContentAlignment="Left" materialDesign:ColorZoneAssist.Mode="SecondaryMid" Style="{StaticResource MaterialDesignFilledTabControl}">
                    <TabItem Header="{materialDesign:PackIcon Home, Size=20}">
                        <TextBlock Margin="8" Text="Secondary filled example tab 1" />
                    </TabItem>
                    <TabItem Header="{materialDesign:PackIcon Controller, Size=20}">
                        <TextBlock Margin="8" Text="Secondary filled example tab 2" />
                    </TabItem>
                    <TabItem Header="{materialDesign:PackIcon Settings, Size=20}">
                        <TextBlock Margin="8" Text="Secondary filled example tab 2" />
                    </TabItem>
                    <TabItem Header="{materialDesign:PackIcon Account, Size=20}">
                        <TextBlock Margin="8" Text="Secondary filled example tab 2" />
                    </TabItem>
                </TabControl>
            </materialDesign:Card>```
            
How can i do this?

[nicolaihenriksen]

@ZeroByteZDev What you're trying to do here is to make the header consist of multiple controls. That is definitely possible, but you need to specify it in a different manner. In the example below I have taken your first TabItem and changed the look of the TabItem.Header. Basically instead of "just" consisting of the PackIcon, I now set it as a StackPanel with both the icon and a text in it.

<materialDesign:Card>
  <TabControl HorizontalContentAlignment="Left" materialDesign:ColorZoneAssist.Mode="SecondaryMid" Style="{StaticResource MaterialDesignFilledTabControl}">
    <TabItem>
      <TabItem.Header>
        <StackPanel Orientation="Horizontal">
          <materialDesign:PackIcon Kind="Home" VerticalAlignment="Center" Height="20" Width="20" />
          <TextBlock VerticalAlignment="Center" Margin="10,0,0,0">Home</TextBlock>
        </StackPanel>
      </TabItem.Header>
      <TextBlock Margin="8" Text="Secondary filled example tab 1" />
    </TabItem>
    <TabItem Header="{materialDesign:PackIcon Controller, Size=20}">
      <TextBlock Margin="8" Text="Secondary filled example tab 2" />
    </TabItem>
    <TabItem Header="{materialDesign:PackIcon Settings, Size=20}">
      <TextBlock Margin="8" Text="Secondary filled example tab 2" />
    </TabItem>
    <TabItem Header="{materialDesign:PackIcon Account, Size=20}">
      <TextBlock Margin="8" Text="Secondary filled example tab 2" />
    </TabItem>
  </TabControl>
</materialDesign:Card>