Outlined textfield icons misplaced

[risalfajar]

Describe the bug When using leading or trailing icon with outlined textfield, the icon is misplaced (see image)

To Reproduce Code:

    <Textfield label='Cari Kode' bind:value={searchQuery} variant='outlined'>
        <Icon class='material-icons' slot='leadingIcon'>search</Icon>
    </Textfield>

Expected behavior Icon should be placed in the center like in the docs

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Brave
• Version: 1.31.91 Chromium: 95.0.4638.69 (Official Build) (64-bit)

Current workaround Using Material Design Bootstrap CSS, I'm able to fix this by adding padding and align classes to the Icon:

    <Textfield label='Cari Kode' bind:value={searchQuery} variant='outlined'>
        <Icon class='material-icons ps-2 align-self-center' slot='leadingIcon'>search</Icon>
    </Textfield>

[isaacwein]

for temporary fix add to main scss file

:global(.mdc-text-field.mdc-text-field--outlined i ) {
  padding: 12px;
  align-self: center;
}

this will set the icons in the center vertically

also, the trailing icon doesn't have the class mdc-text-field__icon--trailing so the trailing is by the end of the text-field box