如何在Angular Material按钮中嵌入SVG图标

你的示例代码本身就是一种有效的实现方式，下面提供几种更完善、适配Angular场景的方案：

方案一：直接内嵌SVG（你的现有写法） #

这种方式完全可行，只需做一些样式优化确保图标和按钮适配：

1. 给SVG添加上样式控制尺寸，避免图标过大/过小：

<button mat-raised-button class="containerSideButton" type="button" (click)="onInfo()">
  <svg id="person" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 24px; height: 24px; vertical-align: middle;">
    <path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
  </svg>
</button>

2. 可以通过CSS统一控制按钮内SVG的样式，比如在.containerSideButton类中添加：

.containerSideButton svg {
  width: 24px;
  height: 24px;
  margin-right: 8px; /* 如果后续要加文字，预留间距 */
  fill: currentColor; /* 让SVG颜色继承按钮的文字颜色，适配主题变化 */
}

方案二：使用Angular Material的MatIcon组件（推荐） #

如果项目用了Angular Material，官方推荐用MatIcon来管理SVG图标，步骤如下：

1. 注册SVG图标到MatIconRegistry：
   在你的组件或模块中注入MatIconRegistry和DomSanitizer，注册SVG：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    // 注册内嵌SVG字符串
    iconRegistry.addSvgIconLiteral('person', sanitizer.bypassSecurityTrustHtml(`
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
      </svg>
    `));
  }

  onInfo() {
    // 你的点击逻辑
  }
}

2. 在按钮中使用mat-icon组件：

<button mat-raised-button class="containerSideButton" type="button" (click)="onInfo()">
  <mat-icon svgIcon="person"></mat-icon>
</button>

这种方式能自动适配Material的主题样式，还能统一管理所有SVG图标。

方案三：将SVG作为背景图（适合简单图标） #

如果不想内嵌SVG，也可以把SVG转成base64或者作为外部文件，设置为按钮的背景：

.containerSideButton {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  padding-left: 32px; /* 给背景图标预留空间 */
}

这种方式适合不需要动态修改SVG颜色的场景。

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