How to align md-icon with text

[Robouste]

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

Check plunkr

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

[julianobrasil]

You can try this:

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

[Robouste]

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

[julianobrasil]

@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.

[Robouste]

Ok, I'm re-opening it then.

[josephperrott]

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.

[angular-automatic-lock-bot]

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.}