角材料自定义徽章尺寸

Question

<button class="user_badge" mat-raised-button color="primary" matBadge="1000" matBadgePosition="after" matBadgeColor="accent" MatBadgeSize="large">
  <mat-icon>person</mat-icon>
  User
</button>

我使用了徽章大小"large"，但我的一些数据倾向于用省略号 ( ...)溢出我需要增加徽章大小。如何使用 css 增加徽章大小？

角材料徽章尺寸文档

感谢任何帮助

Answer 1

您可以使用这种样式。我希望这对你有用

.mat-badge-content {
    width: auto;
    display: grid;
    min-width: 32px;
    min-height: 28px;
    text-align: center;
    align-items: center;
    padding: 5px 3px;
    top: -20px;
    right: -22px;
}

Answer 2

您可以更改该类的以下三个属性mat-badge-content：

.mat-badge-content {
  width: 40px;
  height: 40px;
  line-height: 40px;
}

在这个stackblitz 中尝试一下。