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.

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

feat(button): add md-icon-button styling. #206

Closed
wants to merge 1 commit into from

Conversation

devversion
Copy link
Member

  • Added md-icon-button component / styling
  • Showcased the md-icon-button in the button demos.

I noticed that the icon-button is like a clone of a min-fab, maybe we can make the fab mixin more generic, to let it use by the icon-button too.

Fixes #188

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Mar 19, 2016
height: 40px;

line-height: 24px;
border-radius: 50%;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that the material1 icon-button is the same, but I'm curious: why does it use border-radius: 50%?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because if you have a 24x24 square, then 50% of all sides will be used to archive a responsive perfect circle.

So it's needed to make the element round, like in polymer-icon-button and Material 1

@jelbourn
Copy link
Member

cc @kara

min-width: 0;
padding: 0;

width: 40px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you mind putting this in a Sass variable? All other button sizes are variables in _button_base.scss, so dense layouts can adjust as necessary.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, done 👍

@devversion devversion force-pushed the feat/md-icon-button branch 2 times, most recently from 2a23a6e to e4ea5e9 Compare March 20, 2016 18:12
* Added md-icon-button component
* Showcased the md-icon-button in the button demos.

Fixes angular#188
@jelbourn
Copy link
Member

LGTM

@jelbourn jelbourn closed this in 208cd65 Mar 22, 2016
@devversion devversion deleted the feat/md-icon-button branch November 4, 2016 16:29
@matheo
Copy link

matheo commented Jul 25, 2017

I wonder why this isn't included in the documentation examples :(

@willshowell
Copy link
Contributor

@matheo it will be soon. Here is the example #5628

@matheo
Copy link

matheo commented Jul 25, 2017

@willshowell awesome! thanks

andrewseguin pushed a commit to andrewseguin/components that referenced this pull request Oct 15, 2018
@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 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add md-icon-button variant for MdButton
6 participants