MatNumericUpDownField wrong position of trailing icon

[vankampenp]

Describe the bug
The MatNumericUpDownField has an up and down icon at the end of the field to increment or decrement the value. When you add an icon with IconTrailing="True", the added icon appears in the middle of the up and down icons, rather than to the right of it.

To Reproduce
Steps to reproduce the behavior:
Paste the following in BlazorFiddle:

<p>
            <MatNumericUpDownField Label="int"  Icon ="save"   IconTrailing="true"
                                   @bind-Value="@v5">
            </MatNumericUpDownField>
        </p>
        @code
        {
             int v5;
        }

Blazorfiddle link
https://blazorfiddle.com/s/sz4rjtpf

Expected behavior
The Icon should be trailing to the up down button, not to the input

Screenshots

[Christian-Oleson]

@vankampenp ,
Thanks for reporting the issue. Would you be interested in opening a PR to resolve this?

[vankampenp]

@Christian-Oleson I did some further analyses, and it is a bit more complicated than I can handle I am afraid.

BaseMatNumericUpDownFieldInternal inherits from MatInputTextComponent

MatInputTextComponent shows the trailing icon to the right of the input. MatNumericUpDownField then adds the up /down icons also to the right of the MatInputTextComponent , hence they clash.
So in order to fix this, the trailing icon of the MatInputText should not be activated, and instead be added to MatNumericUpDownField itself.

[enkodellc]

@vankampenp this is the css classes that might work. Play with them a bit. Please find other examples of using a trailing icon with the up/ down so we can see what other approaches look like.

https://blazorfiddle.com/s/u132issl

.mdc-text-field--with-trailing-icon .mat-text-field-actions-container {
    margin-right: 42px;
}

[vankampenp]

@enkodellc
Thanks! It works slightly better with:

.mdc-text-field--with-trailing-icon .mat-text-field-actions-container {
margin-right: 9px;
padding-right: 22px;
}

This makes the input and up down buttons exactly the same as without the trailing icon.
@Christian-Oleson This css can be added to matBlazor.css, but the source is not included on Git.