如何将徽章添加到图标答案

【问题标题】：How do I add a Badge to an Icon如何将徽章添加到图标
【发布时间】：2019-08-31 12:44:37
【问题描述】：

我需要在我的项目上显示计数值的图标上添加一个徽章，我似乎无法使徽章工作。谁能帮我这个？并使徽章在图标上显示计数值。

<div class="actions-bar" fxLayout="row" fxLayoutAlign="end center">
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon class="mat-18 tick-icon">navigation</mat-icon>
<span>{{_dataSource.data.length}} locations</span>
</label>
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon class="mat-18 warning-icon">warning</mat-icon>
<span>{{countWarningAddress()}} locations</span>
</label>
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon matBadge="" matBadgeColor="accent" class="mat-18 tick- 
icon">check_circle</mat-icon>
<span>{{countValidAddress()}} locations</span>
</label>
<label *ngIf="_dataSource.data.length > 0" class="mr-8">
<mat-icon class="mat-18 flag-icon">flag</mat-icon>
<span>{{countInvalidAddress()}} locations</span>
</label>

【问题讨论】：

好吧，在我们深入之前，你有没有测试过countWarningAddress()等方法是否有效？
是的，他们正在工作。我正在做这个练习，我需要为其添加一个徽章以使其看起来更好。
嗯.. 好的，现在，由于这些方法有效，我认为它们只是显示数字计数，对吧？我猜你需要帮助来设计徽章的样式？
是的，他们在图标旁边显示计数，所以现在我需要在显示计数的图标上添加徽章。

标签： javascript html angular icons badge

【解决方案1】：

如果您正在谈论混合移动应用程序徽章，那么您可以为徽章添加插件https://www.npmjs.com/package/cordova-plugin-badge 并使用

cordova.plugins.notification.badge.set(count);

【讨论】：