Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
fix(icon): rem sizes, line-height for font icons
Browse files Browse the repository at this point in the history 
Closes #2597
  • Loading branch information
Marcy Sutton committed Apr 28, 2015
1 parent 87880eb commit 860d1f6
Showing 1 changed file with 9 additions and 3 deletions.
12 changes: 9 additions & 3 deletions src/components/icon/icon.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
$icon-size: 2.8rem;

md-icon {
margin: auto;
background-repeat: no-repeat no-repeat;
display: inline-block;
vertical-align: middle;
fill: currentcolor;
height: 3 * $baseline-grid;
width: 3 * $baseline-grid;
fill: currentColor;
height: $icon-size;
width: $icon-size;

svg {
pointer-events: none;
}

&[md-font-icon] {
line-height: 1;
}
}

//
Expand Down

5 comments on commit 860d1f6

@ThomasBurleson
Copy link
Contributor

Choose a reason for hiding this comment

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

What about the display:block setting in &[md-font-icon]?

@marcysutton
Copy link
Contributor

Choose a reason for hiding this comment

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

It actually wasn't necessary for either of the Plunkers related to that issue, so I left it out.

@jgoux
Copy link

@jgoux jgoux commented on 860d1f6 Apr 29, 2015

Choose a reason for hiding this comment

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

Perfect. 👍
Now we can use whatever third party webfont library without adding CSS rules (just the size of the icons) :)

@hodeyp
Copy link

@hodeyp hodeyp commented on 860d1f6 Apr 30, 2015

Choose a reason for hiding this comment

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

@marcysutton adding line-height of 2.8rem is setting my icons to 28x28, shouldn't this be 2.4rem? Google material guidelines state system icons should be 24px

@jgoux
Copy link

@jgoux jgoux commented on 860d1f6 Apr 30, 2015

Choose a reason for hiding this comment

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

In fact, my icons are bigger too. :P

Please sign in to comment.