Materialize: Make textfield icons align with textfields

[Fylipp]

Description

When giving a textfield an icon the vertical icon alignment is off.

Repro Steps

<div class="input-field">
    <i class="material-icons prefix">vpn_key</i>
    <input id="token" type="text" class="validate" maxlength="10">
    <label for="token">Anmeldecode</label>
</div>

Screenshots / Codepen

https://codepen.io/Fylipp/pen/zzoezO

[DanielRuf]

Please try the code from the CSS tab.

https://codepen.io/anon/pen/rwjVba

[Fylipp]

That works nicely, why is it not that way by default?

[DanielRuf]

@tomscholz Hm, should we pick this or another value?

[Fylipp]

I think .5 rem is actually perfect since it is aligned with the label.

[DanielRuf]

@Fylipp right, this is what I tested in the ChromeDevTools but I did not test further how other icons react and if another approach is better.

[manuel-di-iorio]

The @DanielRuf's solution is perfect!

[Fylipp]

@DanielRuf is this issue going to be addressed in the future? I created a ~PR~ new PR that solves the issue the way you proposed.

[DanielRuf]

The team will probably merge the PR.

[acburst]

Fixed in 3b8cf2d463db63444e73c8157660379ef3f64c6f