Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

md-icon-button in md-toolbar has icon displaced #1093

Closed
Lavan opened this issue Aug 21, 2016 · 2 comments · Fixed by #1736
Closed

md-icon-button in md-toolbar has icon displaced #1093

Lavan opened this issue Aug 21, 2016 · 2 comments · Fixed by #1736
Assignees
@devversion
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@Lavan
Copy link

Lavan commented Aug 21, 2016

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The icon should be centered in the button.

What is the current behavior?

The icon is displaced 8px upwards to be very close to outer edge of the button.

What are the steps to reproduce?

http://plnkr.co/edit/ljTlfhIkQeksCEGimtXM?p=preview

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.0.0-rc.5, angular2-material-alpha.7-4
Replicated on Windows 10 using Chrome, Firefox, Edge and IE 11.

Is there anything else we should know?

Changing the CSS style line-height from 24px to 40px (to correspond with the width and height of the button) seems to solve the issue.
@DzmitryShylovich
Copy link

DzmitryShylovich commented Aug 21, 2016 •
edited
Loading

I think the proper solution would be to add the following here

.md-button-wrapper {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

I can send a pr if it's fine for you @kara @jelbourn

@jelbourn jelbourn added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Nov 3, 2016
devversion added a commit to devversion/material2 that referenced this issue Nov 5, 2016
@devversion
fix(button): ensure icons are aligned vertically.
9864705 
* The icon buttons are never a perfect cirlce, because they can shrink (depending on siblings).
   In Material 1 we solved this by adding `min-width/height`, but having flex-shrink is more approriated here (it allows developers to easily overwrite height / width)

* Sets the line-height for icons only to `i` and `md-icon` elements (as same as for fab buttons)

Fixes angular#1093.
@devversion devversion mentioned this issue Nov 5, 2016
Merged
jelbourn pushed a commit that referenced this issue Nov 11, 2016
@devversion @jelbourn
fix(button): ensure icons are aligned vertically. (#1736)
d3a50b3 
* The icon buttons are never a perfect circle, because they can shrink (depending on siblings).
   In Material 1 we solved this by adding `min-width/height`, but having flex-shrink is more appropriate here (it allows developers to easily overwrite height / width)

* Sets the line-height for icons only to `i` and `md-icon` elements (as same as for fab buttons)

Fixes #1093.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(button): ensure icons are aligned vertically. devversion/material2
4 participants
@Lavan @jelbourn @devversion @DzmitryShylovich