Material: Feature Request: Set background color of whole md-chip

[LisaTatum]

I have not find a way to style the whole md-chip.

The only background color I could set was on the tag around the text in the md-chip like or around the md-chip-template: Both ways colorize only the text block.

<md-chip-template style="background: orange;">
                <strong>{{$chip.name}}</strong>
 </md-chip-template>

[devversion]

I don't think there will be any possibility to easily change the color of a md-chip, because whenever possible we provide theming support through our $mdTheming service but not through plain css.

[LisaTatum]

Theming would be another scenario. I think more of business logic requirements. You want to quickly get an overview which subjects you teach and this happens by a color of your choice.

NOT that you misunderstood me. I meant set the color of the md-chip not md-chips

[devversion]

@LisaTatum No, wasn't misunderstanding you, just meant md-chip instead of md-chips.

Now after your example I can understand why you want to have that, it seems to be a good feature, which should be added IMO.
:+1:

[LisaTatum]

I want to second my request with more uses cases from edutainment field:

You see at first glance what students are taught in which subjects. In certain school systems/classes this can really vary.

Another use case would be the administration of https://en.wikipedia.org/wiki/Periodic_table where each atom would have its certain color. Of course a round chip/atom would make more sense instead of an oval shape. But I would already be very grateful for a colored md-chip!

[EladBezalel]

@LisaTatum A quick override will be

.math.md-chip {
  background-color: yellow;
}

<md-chip class="math">Math</md-chip>

as you can see here

[ThomasBurleson]

@EladBezalel - your approach uses Static chips... but @LisaTatum needs dynamic chips with _remove_ features.

[EladBezalel]

@ThomasBurleson, I've just checked on every chip component, and it's working with no problem.

also my PR removes the .md-chip class, so she will only need to define the class to apply
if she needs some logic applying a class she can always use ng-class or ng-style to apply cretin style according her logic.

[LisaTatum]

@EladBezalel As Thomas said I have dynamic chips. There is no logic to apply ng-class/style. I just get a rgb string "255,100,50" from backend and I want to render that color on the whole md-chip.

[EladBezalel]

That's even easier, ng-style on the md-chip with your background color

[jdiapps]

How would I apply the background color change to md-chips?

[LisaTatum]

@EladBezalel Thanks for quick fix!

[amielmendoza]

How can I change the font color of the placeholder?

[z3ntu]

@EladBezalel Do you have an example for md-chips with a ng-model? When you set the background color in md-chip-template (with ng-style="{'background-color': labels[$chip].color}"), it only gets applied to the text and not the whole chip.

[EladBezalel]

@z3ntu please provide your codepen so i can try to apply it there :)

[z3ntu]

@EladBezalel Here is my codepen.

[EladBezalel]

@z3ntu can you please open a new issue about it and refer this one?

[z3ntu]

@EladBezalel done.

[sohail85]

@EladBezalel: How to apply custom style for md-chips not md-chip (the dynamic one)

[EladBezalel]

@sohail85 the active issue for that is #8692,we're on it :)

[Bleil]

For multiple color on chips, I've created in sass a loop for that it's based on an array of colors and the childs of the chips wrapper...

Hope I can help someone

.your-class {
@for $i from 1 through length($analogous_colors) {
        md-chip:nth-child(#{length($analogous_colors)}n+#{$i}) {
            background: nth($analogous_colors, $i);
            color: white;
        }
    }
}