How to add an icon inside a Textbox using Material Design?

Question

I installed the Material Design Xaml package in my project, but I have a question of how to create an icon in Textbox.

I have the following code:

<StackPanel>
  <TextBox
    Style="{StaticResource MaterialDesignFilledTextFieldTextBox}"
    VerticalAlignment="Top"
    AcceptsReturn="True"
    TextWrapping="Wrap"
    MaxWidth="400"
    materialDesign:HintAssist.Hint="Test">
 </TextBox>
    <materialDesign:PackIcon Margin="0,-50,0,0" Kind="User" Foreground="#3e4147" Height="50" Width="50"/>
</StackPanel>

but it doesn’t work, I try to do the same image below

Answer 1

Use the Canvas, as it allows moving the elements to any corner.

Use the padding in his textbox to leave a space on the left side.

It is important to leave the materialDesign on the top line to overlap the textbox

<Canvas>
    <materialDesign:PackIcon Kind="Heart" Foreground="#3e4147" Height="30" Width="30" Canvas.Left="156" Canvas.Top="34"/>
    <TextBox
        Padding="34 0 0 0"
        Style="{StaticResource MaterialDesignFilledTextFieldTextBox}"
        VerticalAlignment="Top"
        AcceptsReturn="True"
        TextWrapping="Wrap"
        MaxWidth="400"
        materialDesign:HintAssist.Hint="Label" Width="451" Canvas.Left="147" Canvas.Top="10"/>
</Canvas>

The end result will be this: