Angular 如何为Typescript中的每个图标添加不同的颜色

如何在此代码中为每个图标添加不同的颜色：

    {'name': 'Open', link:'some-link', 'icon': 'folder_open'},
    {'name': 'New', link:'some-link', 'icon': 'add_circle'},
    {'name': 'Delete', link:'some-link', 'icon': 'delete'},
    {'name': 'Edit', link:'some-link', 'icon': 'edit'},
  ]

完整代码如下：

interface Page {
  link: string;
  name: string;
  icon: string;
}

@Component({
  selector: 'app-left-buttons-tree-view',
  templateUrl: './left-buttons-tree-view.component.html',
  styleUrls: ['./left-buttons-tree-view.component.css'],
  animations: [onSideNavChange, animateText]
})

export class LeftButtonsTreeViewComponent implements OnInit {


  public sideNavState: boolean = false;
  public linkText: boolean = false;

  public pages: Page[] = [
    {'name': 'Open', link:'some-link', 'icon': 'folder_open'},
    {'name': 'New', link:'some-link', 'icon': 'add_circle'},
    {'name': 'Delete', link:'some-link', 'icon': 'delete'},
    {'name': 'Edit', link:'some-link', 'icon': 'edit'},
  ]

稍后编辑这是HTML代码：

      <div fxLayout="column" fxLayoutGap="10px" style="height: 100%;">
    
        <div>
          <mat-nav-list>
            <a mat-list-item *ngFor="let page of pages">
              <mat-icon style="padding-right:5px;">{{page?.icon}}</mat-icon>
              <span [@animateText]="linkText ? 'show' : 'hide'">{{ page?.name }} </span>
            </a>
          </mat-nav-list>
        </div>
      </div>
    
      <span class="spacer"></span>
      <div fxLayout="row" fxLayoutAlign="end center" style="padding: 0px 10px;">
        <button mat-icon-button (click)="onSinenavToggle()">
          <mat-icon *ngIf="sideNavState">arrow_left</mat-icon>
          <mat-icon *ngIf="!sideNavState">arrow_right</mat-icon>
        </button>
      </div>
    </div>

{{page？.icon}}
{{page？.name}
左箭头
向右箭头

在不使用html的情况下，我想您使用的是一些图标工具包，如字体真棒或棱角材质图标等。这些图标使用webfonts，因此您可以随时更改其颜色。只需在数组中添加一个新的颜色属性，并设置字体颜色即可

阵列修改

{'name': 'Open', link:'some-link', 'icon': 'folder_open', color:"#451278"},
{'name': 'New', link:'some-link', 'icon': 'add_circle', color:"#457878"},
{'name': 'Delete', link:'some-link', 'icon': 'delete'  color:"#651278"},
{'name': 'Edit', link:'some-link', 'icon': 'edit'  color:"#451248"}

HTML

---

其中item是数组中的当前项

，无需使用html，我想您使用的是一些图标工具包，如font Aware或angular material图标等。图标使用webfonts，因此您可以随时更改其颜色。只需在数组中添加一个新的颜色属性，并设置字体颜色即可

阵列修改

{'name': 'Open', link:'some-link', 'icon': 'folder_open', color:"#451278"},
{'name': 'New', link:'some-link', 'icon': 'add_circle', color:"#457878"},
{'name': 'Delete', link:'some-link', 'icon': 'delete'  color:"#651278"},
{'name': 'Edit', link:'some-link', 'icon': 'edit'  color:"#451248"}

HTML

---

其中item是数组中的当前项

添加颜色是什么意思？你能提供一个例子吗？我能看到你的Html模板吗？@Drag13例如：我希望“文件夹打开”的颜色为黄色，“添加圆圈”的颜色为绿色，“删除”的颜色为红色等等@PavelB。{{page？.icon}}{{page？.name}}@RoxanneL您还没有回答您的问题吗？添加颜色是什么意思？你能提供一个例子吗？我能看到你的Html模板吗？@Drag13例如：我希望“文件夹打开”的颜色为黄色，“添加圆圈”的颜色为绿色，“删除”的颜色为红色等等@PavelB。{{page？.icon}}{{page？.name}}@RoxanneL你还没有回答你的问题吗？