Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 7 - All svg icons turned black !


I am using Metronic Template 7. All svg icons turned black. I see that the svg icons have turned black in your demo area as well. How we can solve this problem?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)


Same problem to me



I'm having the same issue. It seems the issue exists only in chrome. I have tried in firefox the icon colors did not turned black. https://imgur.com/SBJAt2M



I was having the same issue but fix it by changing fill="black" to fill="currentColor" on every icon the fastest way is to do a search and replace or you will have to change it one by one. HTH



I've tried this method but if the svg's are inside a label or a button, the source is still a superclass. The svg-icon-{color} class doesnt seem to work and they do not have their own colors. After the 8th Metronic update it is highly possible that Keen have been updated the source file and it is both shared by 7th & 8th variations. Or maybe it's related to a Chrome update.

Hope to see an effective resolution by Keen..



Same problem too...



A possible solution is replace the:

fill="#000000"
with
fill=""



Same problem too, same solution too:

fill="#000000" with fill



replace in where location?



Same problem to me


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(