Issue with icons in angular-material 0.9.0-rc2.

[SimeonC]

I found that all the icons are offset above where they should be in 0.9.0-rc2 (I assume this isn't going to change). The fix I found to get this working properly with angular material is the following CSS snippet:

ng-md-icon {
  fill: currentColor;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
}

This fixes the icon color not being inherited from the text and the bad positioning.

[arealmaas]

+1

[djj0809]

+1, @SimeonC thanks for your work around

[kevindstanley1988]

I am not sure if this is a similar issue, but have you tried using an icon from this directive in an input-container like the last form demo on
https://material.angularjs.org/#/demo/material.components.input

if i use this icon i get the icon completely above and not inline at all.

using the following

    <md-content layout-padding>
        <md-input-container class="md-icon-float">
            <!-- Use floating label instead of placeholder -->
            <label>Name</label>
            <ng-md-icon icon="person" style="fill: rgb(56, 71, 160);" size="32" class="name"></ng-md-icon>
            <input ng-model="user.name" type="text">
        </md-input-container>
    </md-content>

[rcotrina94]

@kevindstanley1988 same here :(

[SimeonC]

From looking at the docs, I think you'll need something along these lines: (I haven't tested this one, this is just the css they use in the docs to do that so you'll probably need to tweak it a bit.)

md-input-container.md-icon-float>ng-md-icon{
    top: 26px;
    left: 2px;
}
md-input-container>ng-md-icon{
    position: absolute;
    top: 5px;
    left: 2px;
}

[ravanscafi]

Currently I've copied all rules related to md-icon, addapted to ng-md-icon and tweaked it a little.
A lot of rules may be unnecessary, but at least I see no bugs.

Hope it helps someone:
https://gist.github.com/rscafi/902eb6b348e4963f0754

[urmilparikh]

I have added angular-material-icons.css file compiled from angular-material.css v0.9.7, similar to what @rscafi did. Thank you, @rscafi!

I haven't tested it though. It would help if someone can use it and check for any issues.

[trevorhreed]

Using the latest from cdnjs, this is still an issue. However, @SimeonC's solution seems to solve it, so I'm guessing the version on cdnjs is out-of-date?

[urmilparikh]

This library does not inject any css automatically, nor have I exported css to CDN yet (since it is untested).
For now, you need to inject .css manually from github (or a local copy).

@SimeonC's solution works, no doubt.
But it may fix one or more specific compatibility issues. The css present in github is expected to fix any/all compatibility issues (and hence, difficult to test all usage scenario).

[trevorhreed]

Is there an issue with using the same element name as the Angular Material library (namely md-icon)? If not, you could rename ng-md-icon to md-icon and take advantage of the Angular Material CSS.

[urmilparikh]

That's possible simply by changing

.directive('ngMdIcon', function() {

to

.directive('mdIcon', function() {

in the code.

However, I'm not sure what side-effects it can result.

[RomFouq]

I have found an other fix; adding the rule

ng-md-icon svg {
  transform: translate3d(0, 25%, 0);
}

seems to fix the vertical alignment problem. I don't know if it's pixel-perfect but this is quite good with 32px icons.

[quantuminformation]

@RomFouq great fix thanks!!

[RomFouq]

There is maybe one problem with this fix: the compatibility: http://caniuse.com/#search=translate3d.
It's not supported by IE and Opera Mini, but this directive does not support IE neither, so this is not really a problem.

[pjdauvert]

Hi, I've just been through this issue as well.
Running with angular-material 0.10
I made alignment correct changing vertical-align to text-bottom

ng-md-icon {
    margin: auto;
    background-repeat: no-repeat no-repeat;
    display: inline-block;
    vertical-align: text-bottom;
    fill: currentColor;
    height: 24px;
    width: 24px;
}

Hope this helps.

[urmilparikh]

#25 (merged in mainline) is better solution than custom .css?

[rcotrina94]

I compiled SVG sprites to use in my project, this is the repository: https://github.com/rcotrina94/svg-material-icons

[urmilparikh]

Closing, since many solutions are now available (#25, #33)

[gad2103]

this still seems to be an issue. for instance, when using these icons instead of md-icon the transitions no longer apply -- an icon that should disappear, say in an md-fab-trigger button, just stay in place...

this would be a really nice thing to have work out of the box. any chance of raising this from the dead?

[urmilparikh]

With angular-material changing all the time, it will be difficult to keep up with compatibility issues.

One hack way could be to override md-icon directive itself. See this comment dated Jun 19 regarding this. Then, all css of md-icon will apply, but you cannot use angular-material's md-icon.

Please let me know if there is a better solution.

[gad2103]

What about pulling in the sass from angular material and doing a "join"
with your styles. This way you could stay consistent with the angular
material changes?
On Thu, Oct 8, 2015 at 11:33 PM urmilparikh notifications@github.com
wrote:

With angular-material changing all the time, it will be difficult to keep
up with compatibility issues.

One hack way could be to override md-icon directive itself. See this
comment
#15 (comment)
dated Jun 19 regarding this.

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

[lexfernandez]

You just need to use the icon like this:

<md-icon ng-md-icon icon="visibility"></md-icon>

[rochapablo]

+1

[johnrix]

@lexfernandez Nice tip... worked perfectly. Don't know why it isn't documented this way.

[kelchm]

Great tip @lexfernandez. I agree this should be part of the documentation for angular-material-icons.