klarsys/angular-material-icons

ng-md-icon cannot vertical align middle while in the md-fab

Closed this issue · 2 comments

I found ng-md-icon cannot vertical align middle while in the md-fab as the code i wrote:

<md-button class="md-fab md-primary md-fab-bottom-right" ng-href="tel:{{nativeInfo.customerPhone}}">
    <ng-md-icon icon="call" style="fill:white" size="20"></ng-md-icon>
</md-button>

After Intercepted the html code generated, I found the inner svg element has no any display property set. I tried to fix this by adding the "display:block" as the css following:

.md-button.md-fab ng-md-icon svg{
display: block;
}

May I have your confirmation or suggestion ?

Please see this issue for workaround:

#15

@quantuminformation it works for me, after tested, I found "line-height:1" is enough for this issue. as the code:
ng-md-icon {
/_/
/fill: currentColor;/
/vertical-align: middle;/
/_display: inline-block;
/
line-height: 1;
}
anyway, let's close this for this issue maybe the same as the #15 .