尝试更改默认 svg 图标颜色时,我遇到了类似的问题。对于那些遇到类似问题的人,请确保检查您当前使用的 angular-material 版本。目前,我正在使用角度材料“0.7.1”,这非常重要。
注意:使用我当前的 Angular-material (0.7.1) 版本,该<mdIcon></mdIcon>
指令仅检查在 postLinking compileFunction 期间是否定义了 attr.Icon。使用此实现,为了引用您的 svg 图标文件,您只需将图标属性添加到您的<mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon>
元素指令。请注意,在早期的 angular-material 版本中,您可能使用 md-src-svg 来引用您的 svg 文件,而在 0.7.1 版本中不再是这种情况。
因此,如果您使用的是 0.7.1 并遵循上述说明,您应该正确渲染您的 svg 图标,现在是时候更改您正在使用的 svg 的背景颜色了。
任何修改前的原始 svg 文件:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24">
<g>
<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>
您的项目中应该有一个文件夹,用于保存所有 svg 图标,在我的情况下,我有一个名为 icons 的文件夹,用于存储所有 svg 图标。上面的示例 svg 文件是我从https://github.com/google/material-design-icons获得的未修改的 svg 图标。(默认其渲染为黑色 svg 文件)
要更改默认 svg 文件,您只需向原始 svg 文件添加一个填充属性。查看修改后的 svg 文件版本:
<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />
我只是添加了 fill="green" 路径元素 svg 文件,现在我的 svg 图标呈现为绿色而不是默认的黑色。我知道你们中的一些人可能正在使用不同版本的角度材料,但更改默认 svg 颜色的机制应该应用相同。希望对解决您的问题有帮助,谢谢!