Components: How to align md-icon with text

Created on 14 Sep 2017 · 6Comments · Source: angular/components

When I tried to put a text next to an icon, I have an alignment problem.

What should I do to get them aligned ? Is there a best practice ? Something I need to do to stay compliant to material guidelines ?

I do not have those problems with other icon library like font awesome. Is there any particular reason for that ?

Changing font-size doesn't make them look better either

Source

Robouste

Most helpful comment

You can try this:

<style>
  .line-with-icon md-icon {
    font-size: 1rem;
    width: inherit;
    height: 1.2rem;
    vertical-align: middle;
  }
</style>

julianobrasil on 14 Sep 2017

👍4 ❤2 😄1

All 6 comments

You can try this:

<style>
  .line-with-icon md-icon {
    font-size: 1rem;
    width: inherit;
    height: 1.2rem;
    vertical-align: middle;
  }
</style>

julianobrasil on 14 Sep 2017

👍4 ❤2 😄1

This is working fine, thank you. However, I don't think it's normal to have to do that in order to have normal alignment. That's wierd

Robouste on 15 Sep 2017

@Robouste, I agree with you. I would left the issue opened and wait for someone from material team's opinion. I'm not sure why md-icon behaves different of regular texts in this case.

julianobrasil on 15 Sep 2017

Ok, I'm re-opening it then.

Robouste on 15 Sep 2017

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are Stack Overflow, gitter, mailing list, etc. Please use our template when filing bugs/feature requests.