Issue
I want to have an icon surrounded by two badges, one on the top left and one on the bottom right.
<span matBadge="1" matBadgePosition="above before" matBadgeSize="large" class="stepNumber">
<span matBadge="favorite" matBadgePosition="below after" matBadgeSize="large" class="stepSubIcon">
<mat-icon class="stepIcon">toggle_on</mat-icon>
</span>
</span>
.stepNumber {
.mat-badge-content {
background-color: white;
color: dark;
border: 1px solid dark;
}
}
.stepSubIcon {
.mat-badge-content {
font-family: 'Material Icons';
background-color: white;
color: dark;
border: 0px;
}
}
.stepIcon {
border-radius: 50%;
background-color: dark;
color: white;
height: 80px;
width:80px;
text-align: center;
line-height: 80px;
font-size: 48px;
}
When only one span has a badge, it appears in the correct place. When both spans have their badge, the matBadgePosition is no longer taken into account.
Is it possible to have several badges surrounding an icon?
Solution
The code below separates the material badges using the icon itself, this should solve your issue
<span
matBadge="1"
matBadgePosition="above before"
matBadgeSize="large"
class="stepNumber"
>
<mat-icon class="heystepIcon">toggle_on</mat-icon>
<span
matBadge="favorite"
matBadgePosition="below after"
matBadgeSize="large"
class="stepSubIcon"
></span>
</span>
Answered By - Ghaith Troudi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.