md-button: adding ng-href/ui-sref to md-button icon makes the icon placement higher

[junereycasuga]

I'm trying to use md-button with icons to navigate through pages. I tried using both ng-href and ui-sref to give link to it, but by doing that, it makes the position of the icon higher than expected

Example code:

<md-button class="md-icon-button" ui-sref="profile">
    <ng-md-icon icon="profile"></ng-md-icon>
</md-button>

Best regards

[marcysutton]

Hi @junereycasuga, can you provide a Codepen or Plunker showing your code running? What is ng-md-icon?

[uriva]

+1
Plunker: http://plnkr.co/edit/ea0fjAZoODuJK905MDC6?p=preview (ignore the JS)

[ThomasBurleson]

@uriva - I am confused with your Plunkr. There is no md-icon in use.

[uriva]

@ThomasBurleson The text is raised in my example, similarly to the icon. I thought these two examples might be the same issue.

[trevor-sonic]

I have the same issue;
I changed Angular Seed startup application view1 link with md-button.
If I remove href="#/view1" inside md-button; button is lined well, after adding the href (or ng-href) Button rising about 10px

EX:

    <ul class="menu">
        <li><md-button href="#/view1">TAB1</md-button></li>
        <li><a href="#/view2">view2</a></li>
    </ul>

[anderskristian]

I have the same problem.
I have made a class and add

padding-top: 8px;

Then It works. But it would be nicer to have it "solved" inside the framework.

UPS.... I see my padding solution is not working in all browsers ....

[robertmesserle]

Agreed, this will definitely be solved inside the framework.
On Sun, Jun 7, 2015 at 11:41 AM Anders Kristian Andersen <
notifications@github.com> wrote:

I have the same problem.
I have made a class and add

padding-top: 8px;

Then It works. But it would be nicer to have it "solved" inside the
framework.

—
Reply to this email directly or view it on GitHub
#2440 (comment).