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<TValue> inherits from MatInputTextComponent<TValue>

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.