Angular material setting color primary, accent, warn

user_2103072 0
Viewed 2105

I've recently started using angular material and I'm slightly confused how to set colors for specific elements. I am importing the Angular theme indigo-pink.css as a tester.

when using a mat button I have the following

<button mat-flat-button color="primary">Test</button>

Which adds the correct primary color to the button.

I have added 2 different elements as well, a span and a mat-card as shown below. 

<span color="primary">Test Span</span>
<mat-card color="primary">Simple card</mat-card>

Essentially I would like this to be the same color as the button, but it's not being implemented. Is there a way to include these elements to have the primary colors included without having to manually add it into css?

Thanks

angular-material2 angular-material angular css
1 Answers

I will go with yes and no. Because the color attribute is not natively supported by span or mat-card. But by creating a new attribute directive you can basically extend their behavior.

I created a really basic directive sample, you can basically extend it for your needs.

user_10713680
Related