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

[cadilhac]

I'm linking to 1.0 rc4 and I still see this issue.

[mlenser]

Still seeing the issue with ui-sref on 1.0 rc7

Switching to anchor in the button fixes it: http://stackoverflow.com/questions/32435358/ui-sref-and-md-button-how-it-works

[nurp]

With v1.0-rc7, my icons in md-button are misaligned regardless a href, ng-href, ui-sref or without anchor. same, when I use ng-md-icon or md-icon or <icon tag

<md-list>
      <md-list-item ng-repeat="item in admin.tabs track by $index">
          <md-button>
            <i class="material-icons">{{item.icon}}</i>
            {{item.title}}
          </md-button>
    </md-list-item>
</md-list>

[johannesjo]

Yap doesn't work with 1.0.2 neither.

[james89]

+1

[MarkTroutfetter]

+1

[martineckardt]

+1

[mikila85]

+1

[Matt-Dionis]

+1

[andrewshvv]

+1

[smbowler]

+1 any update?

[laurent-grousset]

+1

[jalsamn]

+1

[ThomasBurleson]

@devversion - reopening as this appears to be broken.

[wallzero]

+1

[ssamakar]

+1

[xxmicloxx]

+1

[salahaldin]

+1

[anymos]

+1

[gizmochief7]

+1