如何使用条件为angular中的mat-icon应用颜色
在Angular中使用mat-icon应用颜色的条件是通过设置mat-icon元素的color属性来实现。
- 首先，确保你的Angular项目中已经引入了Angular Material库。如果没有引入，可以通过以下命令安装：
- 首先，确保你的Angular项目中已经引入了Angular Material库。如果没有引入，可以通过以下命令安装：
- 在需要使用mat-icon的组件中，导入相关的Angular Material图标模块。例如，在组件的.ts文件中添加以下导入语句：
- 在需要使用mat-icon的组件中，导入相关的Angular Material图标模块。例如，在组件的.ts文件中添加以下导入语句：
- 然后，在组件的@NgModule装饰器中将MatIconModule添加到imports数组中：
- 然后，在组件的@NgModule装饰器中将MatIconModule添加到imports数组中：
- 在组件的HTML模板中，使用mat-icon元素来展示图标，并通过color属性设置颜色。例如，设置图标为红色：
- 在组件的HTML模板中，使用mat-icon元素来展示图标，并通过color属性设置颜色。例如，设置图标为红色：
- 在上述代码中，color属性的值为"warn"，表示设置图标的颜色为警告颜色，你可以根据自己的需求选择其他预定义的颜色或自定义颜色。
- 如果想要根据组件中的动态变量来设置颜色，可以使用插值表达式和绑定属性的方式：
- 如果想要根据组件中的动态变量来设置颜色，可以使用插值表达式和绑定属性的方式：
- 在上述代码中，iconColor和iconName是组件中的变量，你可以根据自己的逻辑来设置它们的值。
总结起来，要在Angular中使用mat-icon应用颜色，需要导入相关模块、设置color属性，并根据需要选择合适的颜色值。如果你想了解更多关于Angular Material图标的信息，可以参考腾讯云的相关产品文档：
相关·内容
form field image->I需要在angular中为check_circle mat-icon添加颜色，该图标在登录表单字段中 ->After用户输入他的电子邮件，然后它(check_circle)图标应该变成绿色，如果他没有输入他的电子邮件，它应该是灰色的。value == 'admin@mcrb.com') return 'green' else {
浏览 37提问于2021-10-07得票数 0
1回答
如何在mat-icon Angular上设置渐变颜色？我可以在css中设置颜色，例如红色、绿色或任何其他纯色，如mat-icon { color: red; }。但是，当尝试设置为像mat-icon {linear-gradient(to right, xxxxxx, #xxxxxx);}这样的渐变颜色时，它没有任何效果。谢谢：)
浏览 3提问于2020-12-07得票数 0
2回答
如何根据angular typescript模板中的值动态更改颜色？谢谢你们的帮助。非常感谢。例如，如果item.status == 'Active' && ang item.role == 'Admin'将颜色设置为color:#00B0D，否则将颜色设置为#707070 <mat-icon"Example home ico
浏览 28提问于2021-07-09得票数 0
如何根据情况改变角度按钮的颜色?action.name === 'For Approval'" matTooltip="{{action.name}}" <mat-iconstyle="font-size: 20px;" class="{{action.class}}">
{{action.i
浏览 29提问于2021-09-05得票数 0
回答已采纳
2回答
我有一个带有默认类的图标，类名是卡片图标，现在如何根据条件更改类或禁用类？知道怎么实现这个家伙吗？谢谢。#Icon与默认类
<mat-icon class="c
浏览 12提问于2021-07-25得票数 0
回答已采纳
我需要在点击按钮后将按钮颜色更改为红色(原色为红色)，请帮助我如何在点击按钮后更改颜色。 <button mat-icon-button color="primary">
<mat-icon>remove_circle</mat-icon>
浏览 2提问于2018-10-24得票数 1
回答已采纳
在angular 9材质设计中，如何在mat-icon上动态绑定matSuffix和matPrefix？ 我不喜欢我的方式。他们有没有更好的办法呢？<div *ngIf="condition; else elseBlock"><mat-icon matSuffix>visibility_off</maticon></div>
<ng-template#elseBlock>
浏览 46提问于2020-04-24得票数 0
1回答
我正试图在我的迷你项目中用配置图标。我试过几次教程，但都没有用。/assets/mdi.svg'));这是我的密码。app.module.tsimport { NgModule } from '@angular/core';
import { FormsModule } from '@angu
浏览 3提问于2019-03-22得票数 4
回答已采纳
2回答
使用角，我创建了一个图标组件，它允许设置属性size和color。属性size和color简单地将一个CSS类添加到资料图标标记中。my-icon { color: blue;}
我还尝试在::ng-deep前面添加一个my-icon。但是，在图标上方盘旋时，颜色<
浏览 3提问于2022-07-02得票数 0
13回答
我希望只使用 many 组件执行密码和确认密码验证，如果confirm password field doesn't match和if it is empty，则在确认密码字段下面的错误消息将无法实现。这是我要找的材料部件。 import {FormControl, FormGroupDirective, NgForm, Validators} from
'@angular，则它将验证以下条件:如果密码和确认密码字段<em
浏览 23提问于2018-07-31得票数 108
回答已采纳
我使用的Angular mat-chip有一个简单的css风格：background-color white。它工作正常，但当我将焦点放在元素上时，背景颜色就消失了。background-color: white" {{ value }}
<mat-iconmatChipRemove class=&
浏览 4提问于2021-06-22得票数 0
4回答
我正在开发一个angular应用程序。当我的标志为真时，我想有条件地改变正文的背景颜色。在我的css中，我有以下内容 backgraound-color: blue;现在，此颜色应用于整个页面。但是当我的标志为true时，我想改变页面的背景颜色。通常，当我必须有条件地更改背景颜色时，我会
浏览 1提问于2020-08-24得票数 1
8回答
我有这个，我认为这是可行的，但没有：然后，我也有： <mat-icon color="white">save</mat-icon>SAVE
<
浏览 22提问于2017-10-18得票数 81
回答已采纳
我有一个页面，我想在其中使用此Angular表单域： <mat-label>Outline form field</mat-label></mat-form-field>
现在，注意mat-form-field中的appearance="outlin
浏览 3提问于2018-09-14得票数 0
2回答
在src\styles.scss中，我有：我的模板/ HTML文件有： </div></mat-sidena
浏览 5提问于2019-01-18得票数 8
我正在尝试为我的angular应用程序创建一个嵌套的mat菜单项。我得到了一些解决方案，其中嵌套的选项将显示为弹出窗口，我希望它是一个下拉列表，当触发时，我们可以选择位于它下面的菜单。我尝试使用mat-sidenav-container，并根据该条件给出了几个打开菜单的条件 <mat-list-item (click)="show
浏览 0提问于2019-05-09得票数 2
2回答
我试图增加一个按钮的连锁反应，但它崩溃了整个网页。当我将matRipple添加到我的按钮时，什么都不会发生。当我试图添加颜色[matRippleColor]="white"，我得到“不能绑定到'matRippleColor‘，因为它不是一个已知的属性’按钮‘”。这很奇怪，因为我启用了其他网页上的涟漪，而且效果很好。MatRippleModule)：
HTML：
<button matRipple class="submit-button" c
浏览 6提问于2019-05-30得票数 2
1回答
我正在研究一个角度应用程序，其中包含一个带有几个面板的垫-手风琴组件。可以启用或禁用面板。我使用一个资料界面图标来表示这一点。如果启用了面板，我将显示check_circle mat图标。我希望它以灰色的颜色显示，表示面板已被禁用。我有这个： [ngClass]="{'icon-accordeon': true, 'disabled': !'check_circle' :
浏览 8提问于2022-06-03得票数 0
3回答
因此，我需要改变一个按钮的颜色与材料图标时，我点击它。我试过这样的方法： <button (click)="activeSkill($event)" color="primary" mat-mini-fab> </bu
浏览 1提问于2019-02-12得票数 1
回答已采纳
3回答
我喜欢angular material的设计，但使用它可能会很痛苦。该网站展示了一个使用然而，当我在我的项目中做同样的事情时，我只看到文本"home“。我使用的是angular material v8.0.1。我还安装了material-design-icons v3.0.1。把这个放到我的</
浏览 2提问于2019-06-25得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
