Materialdesign: Login/Logout icons

[pbhowmic]

For the login and logout icons, the door width is inconsistent.

[Templarian]

I'll look into this when I get a moment.

Thanks for opening an issue.

[pbhowmic]

Actually, you can close this one. It is pretty minor, I can only see a slight deviation at an 8x resolution in GIMP. Check it all the same

[Templarian]

I looked at it earlier and I'm not seeing any variation. You are using the SVG files from MaterialDesignIcons.com right and not out of the repo?

[pbhowmic]

Right. And the difference is (from left side boundary to right side boundary) about 1 pixel. login is almost 14 pixels wide, logout 13.

[Templarian]

Oh, yea, that's just to keep door the same size and the spacing even between the two. I illustrated how I determined the spacing below...

Legend: Gray = recommended padding (2dp), Red = eye balling spacing, other = spacing comparisons.

I'm sure there are other ways this icon could be designed though to more evenly handle the visual alignment. Maybe in the future it could be replaced with less of a literal door in/out concept. :smile:

[CoDEmanX]

The spacing / door width is equal, but it doesn't look that way. To improve visual equality, I suggest to move the right vertical stroke of the login door by 1 pixel to the right.

Currently:

Improved:

It shouldn't be much of the problem to do that, because the horizontal placement of both icons is different and the varying door width thus not apparent even if you use them for a hover effect.

[JamesCoyle]

Could also keep the arrow on the same side maybe?

Note those are just quick pixel based drawings not smooth SVG.

[goyney]

To add to this, Font Awesome's icons for sign in and out follow our current pattern, but both icons are exactly 16dp in width. So, my goal when opening our two versions was to find a solution that takes the exact same width and is symmetrically consistent.

First, I found some grid issues in both around the arrow head, so those were resolved. I then opened the gap in the door 2dp in both directions and lined the arrow up adjacent to the door border. These are what I ended up with. (The grey outline is the current icons for comparison.)

I feel these are more consistent and would resolve the unbalanced feeling you currently get when looking at the two.

loginout.zip

[Templarian]

Updated!