[英]Angular Material: How to use `mat-icon` as `mat-card-avatar` within `mat-card-header`?
mat-card-avatar
指令可以应用于任何元素,包括<mat-icon>
。 您需要将样式应用于图标以获取正确的大小:
<mat-card>
<mat-card-header>
<mat-icon mat-card-avatar>home</mat-icon>
...
mat-icon.mat-card-avatar {
width: 40px;
height: 40px;
font-size: 40px;
}
它们不会自动更改样式。 我使用的一种方法是将其声明为并增加字体大小以匹配默认的 40 像素。
<mat-card class="example-card">
<mat-card-header>
<i mat-card-avatar class="material-icons">accessibility</i>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
.....
</mat-card>
有了这个,你只需要指定 font-size:40px;
.example-card {
max-width: 400px;
& i {
font-size: 40px;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.