How to get calendar_today_outlined icon for Angular Material Datepicker?

According to the documentation, https://api.flutter.dev/flutter/material/Icons/calendar_today_outlined-constant.html

calendar_today_outlined icon is shown as:

But when I use it in example

<mat-icon #pickerSingleIcon>calendar_today_outlined</mat-icon>

I get the header filled:

This confused me, why the specified calendar_today_outlined icon is shown the same as calendar_today.

Wonder how to get the outlined icon for the calendar?

Refer to my previous answer on Angular Material doesn't load certain icons.

You need to import Material Symbols Outlined stylesheet.

<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" 
/>

And specify fontSet attribute in the <mat-icon> element.

<mat-icon #pickerSingleIcon 
  fontSet="material-symbols-outlined" 
  (click)="pickerSingle.open()"
>
  calendar_today_outlined
</mat-icon>

Demo @ StackBlitz