Angular Material扳手图标样式定制求助

嘿，我完全懂你想把这个Material扳手图标改成蓝边、内部白/透明的样子，之前试的方法没生效还遇到样式灰化的问题，这就给你捋清楚怎么解决～

首先得说清核心问题：你之前用的outline属性是给普通HTML元素（比如div、button）加外框的，但Angular Material的mat-icon渲染后其实是个SVG图标，SVG不吃CSS的outline那套，得用它原生的stroke（描边，也就是你要的蓝边）和fill（内部填充色）属性来控制——这就是为啥你之前的outline属性会灰化，完全不对路呀！

而且你之前的.my-wrench是加在button上的，要精准选中里面的图标，得把样式写到mat-icon内部的svg元素上才行。

下面给你具体的解决方案：

方案1：组件内样式（需穿透封装） #

如果你的样式是写在当前组件的.scss/.css文件里，因为Angular默认的样式封装，得用::ng-deep来穿透到子元素的SVG：

.my-wrench mat-icon {
  /* 保留你需要的旋转效果 */
  transform: rotate(90deg);
}

::ng-deep .my-wrench mat-icon svg {
  /* 蓝边颜色 */
  stroke: blue;
  /* 描边宽度，可根据需求调整，2是适中的默认值 */
  stroke-width: 2;
  /* 内部填充白色，要透明就改成transparent */
  fill: white;
  /* 可选：让描边的转角和端点更圆润，更贴近你想要的图标质感 */
  stroke-linecap: round;
  stroke-linejoin: round;
}

方案2：全局样式（无需穿透） #

如果把这段样式加到项目的全局样式文件（比如src/styles.scss）里，就不用::ng-deep了，直接写：

.my-wrench mat-icon {
  transform: rotate(90deg);
}

.my-wrench mat-icon svg {
  stroke: blue;
  stroke-width: 2;
  fill: white;
  stroke-linecap: round;
  stroke-linejoin: round;
}

为啥之前的方法都不行？ #

• 给button加outline：那是给整个按钮加外框，不是图标本身，而且Material的button内置样式可能还会覆盖这个属性，导致样式灰化不生效。
• 写.my-wrench mat-icon { color: blue; }：这个是把整个图标的填充色改成蓝色，相当于直接把图标染蓝，和你要的「蓝边+白填充」效果完全不是一回事。

调整完样式后，你的build图标就会变成蓝色描边（外框）、内部白色（或透明）的样子，同时保持90度旋转，和你想要的效果完全匹配啦～

内容来源于stack exchange