2580: Center search icon

[Njivaniaina2407]

Short description
The Search Icon is not centered with the input "Suche"

Proposed changes
Center and align the Search Icon with the input, set it a little lower

Side effects
Resolved issues
The Search Icon is aligned with the Input "Suche"

Fixes: #2580

---

[LeandraH]

That solves the issue here very nicely, thank you! But I think we can make the code more future-proof by setting the parent display to flex and aligning its items with the center. That would also keep us safe in case we e.g. change the icon sizing at some point.

[f1sh1918]

That solves the issue here very nicely, thank you! But I think we can make the code more future-proof by setting the parent display to flex and aligning its items with the center. That would also keep us safe in case we e.g. change the icon sizing at some point.

sorry i probably should have mentioned it again in the ticket here. This task was about learning sth. about flexbox :)
Just some background behind that @Njivaniaina2407
If you are setting the icon pixelwise to a position and the icon size may change or the size of the container may change it will not be centered anymore. That's why its better to use flexbox that centers the item depending on the parent

[Njivaniaina2407]

I've modified the code and aligned the icon to center from the div parent

[f1sh1918]

Good Work :) Added a comment about inline-flex

[LeandraH]

Nicely done!