嘿，完全懂你不想手动复制图标的痛苦！我来给你几个靠谱的解决方案：

一、获取官方图标名称列表（无需手动复制） #

你完全不用一个个复制，官方和社区有很多现成的资源可以直接用：

1. 利用官方npm包的元数据 #

Material Icons有官方的字体包@material-design-icons/font，安装之后，包内自带metadata.json文件，里面包含了所有图标的名称、分类、标签等信息。你可以：

• 先安装包：npm install @material-design-icons/font
• 找到包内的metadata.json（一般在node_modules/@material-design-icons/font/目录下），把它复制到你的项目assets目录中
• 在Angular里用HttpClient读取这个JSON文件，提取其中的name字段，就能得到所有图标名称的数组，直接用来生成选择框选项。

示例代码（Angular服务中）：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class IconService {
  constructor(private http: HttpClient) {}

  getIconNames() {
    return this.http.get<any>('assets/metadata.json').pipe(
      map(data => data.icons.map((icon: any) => icon.name))
    );
  }
}

2. 从GitHub仓库提取纯名称列表 #

如果你不想安装npm包，可以直接去Material Icons的官方GitHub仓库，找到iconfont/codepoints文件——这是一个纯文本文件，每行格式是图标名称 Unicode编码。你可以：

• 下载这个文件，写个简单的Node.js脚本提取所有图标名称：

const fs = require('fs');
const codepointsContent = fs.readFileSync('./codepoints', 'utf8');
const iconNames = codepointsContent
  .split('\n')
  .filter(line => line.trim() !== '')
  .map(line => line.split(' ')[0]);

fs.writeFileSync('./icon-names.json', JSON.stringify(iconNames, null, 2));

• 运行脚本后得到的icon-names.json就是所有图标名称的数组，直接导入项目使用即可。

3. MUI用户的快捷方式 #

如果你用的是Material UI，@mui/icons-material包导出了所有图标组件。你可以通过require.context批量导入，再把组件名转换为mat-icon需要的蛇形命名（比如AccountCircle → account_circle）：

const iconContext = require.context('@mui/icons-material', false, /\.js$/);
const iconNames = iconContext.keys().map(key => {
  // 提取组件名，比如 './AccountCircle.js' → 'AccountCircle'
  const componentName = key.replace('./', '').replace('.js', '');
  // 转换为蛇形命名
  return componentName.replace(/([A-Z])/g, '_$1').toLowerCase().substring(1);
});

二、关于matIconRegistry没有get函数的解决思路 #

其实matIconRegistry主要是用来注册自定义SVG图标的，对于官方的字体图标（你说的baseline风格），根本不需要注册——只要你在项目中引入了Material Icons字体，直接在<mat-icon>标签里写图标名称就能用。

如果你是想管理自己注册的SVG图标，那建议你自己维护一个图标名称列表，和注册逻辑同步。比如：

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

export const customSvgIcons = ['my-custom-icon', 'another-icon'];

@NgModule({...})
export class AppModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    customSvgIcons.forEach(name => {
      iconRegistry.addSvgIcon(
        name,
        sanitizer.bypassSecurityTrustResourceUrl(`assets/icons/${name}.svg`)
      );
    });
  }
}

这样customSvgIcons数组就是你可用的自定义图标名称，直接用来生成选择框就行。

内容的提问来源于stack exchange，提问作者Kevin192291