md-avatar-icon inside a clickable md-list-item

[tjlav5]

It seems that the css for the md-avatar-icon is a bit too specific.

md-list-item > .md-avatar-icon {
    background-color: '{{foreground-3}}';
    color: '{{background-color}}';
}

When adding a click fn to the containing md-list-item, the new structure becomes:

md-list-item -- button ----.md-list-item-inner ------.md-avatar-icon

Is there any reason to not have an md-avatar-icon inside a clickable list-item? Or is it just an omission? If the later I can submit a quick PR.

Something along these lines would fix my use case:

md-list-item > .md-avatar-icon, .md-list-item-inner > .md-avatar-icon

OR

md-list-item .md-avatar-icon

Cheers

[programmist]

@tjlav5 - Please provide a CodePen or Plunkr that demonstrates this issue. Here are some starter demo templates that you can use/fork:

• CodePen template: http://codepen.io/team/AngularMaterial/pen/BNYppz
• Plunkr template: http://plnkr.co/edit/yP0gB9iTacIQb48thud8?p=preview.

[tjlav5]

An md-avatar-icon child of a md-list-item gets a simple theme: color & background-color. https://github.com/angular/material/blob/1d29ef9570340b7fc956ebc49bf543180cc2fdca/src/components/list/list-theme.scss#L15

CodePen: http://codepen.io/anon/pen/gaEOvo The first md-list-item does not have an ng-click attr, the second does

Once the md-list-item has a click event handler associated with it (ng-click), a button and md-list-item-inner come into play. When that happens, the theme for the md-avatar-icon no longer applies the colors...

[programmist]

@tjlav5: I've applied the style change and have a working demo here: http://codepen.io/programmist/pen/ZQYZay

Please verify that it's working for you.

[tjlav5]

@programmist Yep, that did the trick.

[programmist]

This has been waiting on PR #6181.