Give screen reader useful informaiton for mat-badge

[Elblinator]

Describe the bug
While in the dev mode several aria warning are thrown they should be fixed and therefore prevented

e.g.

Detected a matBadge on an "aria-hidden" "<mat-icon>". Consider setting aria-hidden="false" in order to surface the information assistive technology.
<mat-icon _ngcontent-ng-c464520433="" role="img" matbadgecolor="accent" matbadgeoverlap="false" matlistitemicon="" class="mat-icon notranslate mat-badge mat-badge-accent material-icons mat-ligature-font mat-icon-no-color mat-badge-above mat-badge-after mat-badge-medium mat-badge-hidden" aria-hidden="true" data-mat-icon-type="font"> sms <span id="mat-badge-content-0" aria-hidden="true" class="mat-badge-content">0</span></mat-icon>

How to Reproduce
DEV:

1. In DEV mode open console
2. navigate to several pages (e.g. any page with sort or filter)
3. Warning are thrown

PROD:

1. In production go to page where the warning is thrown (e.g. /participants)
2. Activate a filter/ sort
3. activate "wave expension"
4. open "order" in wave extension
5. search for "sort Sort"/ "filter_list # Filter #"

Expected behavior
The warning in dev-mode should not be thrown and the screen reader should get the displayed information in a useful manner