Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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?


user
HR Metrics 3 years ago
Metronic HTML Next.js
9 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)

user
M Fadillah 3 years ago

Same problem to me


user
Diógenes Konrad 3 years ago

A possible solution is replace the:

fill="#000000"
with
fill=""


user
Nath Sipiran 3 years ago

Same problem too, same solution too:

fill="#000000" with fill


user
M Fadillah 3 years ago

replace in where location?


user
Diógenes Konrad 3 years ago

Same problem too...


G
Guest 3 years ago

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


user
HR Metrics 3 years ago

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..


user
Julius Aviquivil 3 years ago

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


user
Liviu Birleanu 3 years ago

Same problem to me


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(