Google material icons alignment

Hello experts,

I use google material icons in my project and I want to ask if there's a way to cut the "whitespace" from them, because it's not align properly in my grid. The icons are only square size when I add font-size: 20px e.g.  it's gonna be 20x20

But if the icon is <i className="material-icons">more_vert</i> (3 dots bellow each other) you can see the problem, it's align in center of that 20x20 square...glyphicons from bootstrap doesn't have that problem.

I use only basic google font css : (width and heigh: auto doesn't work)

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  vertical-align: middle;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Open in new window

LVL 1
Fajer39Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Eddie ShipmanAll-around developerCommented:
Play around with the Font-size, Width, Height, and margins to do it.
I was able to get it by doing this on their demo page: https://www.google.com/design/icons/

#layout /deep/ .md-icon.dp48 {
    font-size: 48px;
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    margin-left: -24px;
    margin-top: -24px;
}

Open in new window

Fajer39Author Commented:
Well, your example completely distort the icon so I don't think that's a good way to do it.

Here's a proof
result.png
Eddie ShipmanAll-around developerCommented:
Ok, change the font-size, too. This is how mine looks, I used 24px x 24px:

The icon's CSS
The Caption's CSS
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Eddie ShipmanAll-around developerCommented:
Go here and read the part "Styling icons in material design":

https://google.github.io/material-design-icons/#icon-font-for-the-web
Fajer39Author Commented:
Eddie,

I get it, and I finaly did it, only with width + font-size, but it's not correct. When I use negative margins, it's ok, but the overflow...is it dangerous? What do you think?...I just though that it would be easier, I don't get it why the icons have whitespace around them...
Eddie ShipmanAll-around developerCommented:
Look, you are going to have to play around with the values until you get what you like. CSS is just that way, it's not one-size-fits-all.

I'd rather see your presentation and fix it, rather than trying to use the page that Google put up.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Fajer39Author Commented:
I know, one last thing- with negative margin- it 's perfect but it overflows the container (because the icon is in the right corner of it)

here's the images:
http://tinypic.com/r/28arp68/8 - look just at the container
http://tinypic.com/r/2rgkx2v/8 - margin-right: -15px applied...i realized that with -13px it's perfect, but it doesn't matter, you still see the overflow.

My Q is, is that dangerous? (on some browsers etc. )

With bootstrap glyphicons it's much easier, they don't have that kind of whitespace around them
Eddie ShipmanAll-around developerCommented:
As I said, I would need to see your actual pages to help out further. images won't help. These icons don't really have whitespace around them, you just have to get the settings right.
Fajer39Author Commented:
Unfortunely I can't do that- NDA is signed...

Please look at https://www.google.com/design/icons/ and search "more vert" - this is the icon with that "whitespace" around it that I have problem with.

I use the same settings for that google fonts as they on their original site, so If you can remove the "whitespace" around "more vert" icon, I could apply that workaround on my site. Thank You for pattience.
Eddie ShipmanAll-around developerCommented:
Can you not make small mock of just area needing the icons on Codepen?
Eddie ShipmanAll-around developerCommented:
Why didn't you just create a sample of the area needing the icons so we could make the values work?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.