How do I lineup material icon button to right of input

Believe me I have googled and tried stuff and nothing works. I've created a stackblitz for a custom angular cdk material dropdown I am trying to design. For some reason, the material icon button, the icon itself appears very small but is surrounded by a huge span that blows out the whole row.

In my app, when the user enters a form, I want everything readonly and the input's border is invisible and the button is hidden. When they click the edit button, I enable the input, show the border and the button. Problem is when the button becomes visible, it's so much taller and it wrecks the page layout.

Here is the base html with the input and mat-icon-button


<div style="border: 1px solid black">
{{label}}:
<input
matInput
class="inputFieldText"
[value]="description"
[disabled]="isDisabled"
[readonly]="isReadOnly"
/>
<button
mat-icon-button
class=""
style="border: 1px solid red"
[disabled]="isDisabled"
[hidden]="isReadOnly"
[dropdownTriggerFor]="dropdown"
>
<mat-icon>arrow_drop_down</mat-icon>
</button>
</div>

<dropdown-panel #dropdown>
@for (item of data; track item.value) {
<div (click)="select(item.value,item.description)" class="dropdown-item">
{{item.description}}
</div>
}
</dropdown-panel>

In my stackblitz, I've got the current state of my custom dropdown working defaulting to edit mode already on startup.

How can I get that material icon to be no larger than the input height and that arrow to appear larger at the same time? I'm trying to get everything to line up nicely in a row.

Continue reading...