Как я могу использовать директиву [color] в текстовом элементе, таком как span?

Question

Я хочу использовать директиву [color], которая используется в Angular Кнопках материалов для определения цветов.

<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>

Вопрос: Как мне установить эти [color] директивы использовать его с <span> или другими текстовыми элементами (h1, h2, ...)?

Я ожидаю использовать его как:

<span color="primary">This text has my primary theme color</span>

Я надеваю не хотите:

• установить классы для диапазона
• использовать !important
• использовать ngClass

Answer 1

Просто завернуть в кнопку?

<button mat-icon-button color="primary"><span >This text has my primary theme color</span></button>

https://stackblitz.com/angular/aprongvrgkr?file=src%2Fapp%2Fbutton-overview-example.html