为什么在Angular材质中使用第二个后，自定义SVG图标样式会发生变化？

在Angular材质中使用第二个后，自定义SVG图标样式会发生变化的原因是由于Angular材质库的工作原理导致的。

Angular材质是一个UI组件库，它提供了一套丰富的可重用UI组件，包括按钮、卡片、表单控件等。这些组件使用了一些预定义的样式和布局规则，以确保整个应用的一致性和可维护性。

当我们在Angular材质中使用自定义SVG图标时，实际上是将SVG图标作为一个组件来使用。在使用组件的过程中，Angular材质会为这个组件应用一些默认的样式和布局规则，以确保图标的显示效果符合整体设计风格。

然而，当我们在同一个页面中使用了多个自定义SVG图标组件时，由于Angular材质的工作原理，它会将这些组件的样式进行合并处理。这意味着第二个自定义SVG图标组件会继承第一个组件的样式，从而导致样式的变化。

为了解决这个问题，我们可以采取以下几种方法：

1. 使用不同的CSS类名：给每个自定义SVG图标组件添加不同的CSS类名，以避免样式的冲突和继承。
2. 使用CSS作用域：在Angular中，我们可以使用CSS作用域来限定样式的作用范围。通过为每个自定义SVG图标组件添加独立的CSS作用域，可以确保它们之间的样式不会相互影响。
3. 自定义样式：如果我们需要对自定义SVG图标的样式进行更加精细的控制，可以通过自定义CSS样式来覆盖Angular材质的默认样式。可以通过在组件的CSS文件中定义特定的样式规则，来修改图标的颜色、大小等属性。

总结起来，当在Angular材质中使用第二个后，自定义SVG图标样式会发生变化是因为Angular材质的工作原理导致的样式合并。为了解决这个问题，我们可以使用不同的CSS类名、CSS作用域或自定义样式来控制自定义SVG图标的样式。