如何为Angular Material日期选择器获取calendar_today_outlined轮廓图标？

嘿，我完全懂你的困惑！你现在遇到的问题其实是混淆了Flutter的图标命名规则和Angular Material所使用的Material Icons字体的命名逻辑啦～

问题根源 #

你参考的是Flutter的图标文档，但Angular Material依赖的是Google官方的Material Icons字体库，两者的图标命名有细微差异——Flutter里的calendar_today_outlined在Material Icons字体里对应的正确名称并不是这个，这就是为什么你用这个名称时显示的是填充版的calendar_today图标。

解决方法 #

这里有两种可靠的方式来获取你想要的轮廓样式日历图标：

方式一：使用正确的图标名称（基础轮廓版）

Material Icons字体中，calendar_today的基础轮廓版本对应的名称是calendar_today_outline（注意是_outline而不是_outlined）。你只需要修改你的代码：

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

这样就能显示出你想要的轮廓样式了。

方式二：使用Material Icons Outlined系列（更精细的轮廓版）

如果你想要的是Material Icons推出的更纤细的Outlined系列图标，需要先在项目的index.html中引入该系列的字体：

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

然后在使用mat-icon时指定fontSet属性：

<mat-icon #pickerSingleIcon fontSet="material-icons-outlined">calendar_today</mat-icon>

这种方式会加载专门的Outlined系列字体，显示的图标轮廓会更细腻。

另外还要确认你已经正确引入了基础的Material Icons字体（如果用方式一的话），通常在index.html里会有这行代码：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

内容来源于stack exchange