SVG icons doesnt accept colors after Metronic 8.1.0 update

Hello Devs!

After upgrading my Metronic 8.0.38 Laravel version, the svg icons doesnt accept colors like:

svg-icon-primary or svg-icon-danger, they appear black, also my pagination buttons from datatables are broken, is there something i missed? or where should I check to fix this issues?


Thank you in advanced

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 (12)

Hi Carolos,

Have you checked the console? Maybe there are some errors in there they may help.

I have the same problem with version 8.1.0 in the HTML version. I am using DEMO 1, which apparently has quite a few bugs. Among them, not being able to change the color of the Duotone SVG icons, the Scrolltop button not appearing and the size of the Header getting unconfigured when going from 8.0.38. I had to rewrite all my code to solve the header issue.

Hi,

We suggest you fully update the laravel/resources/assets and the views and merge back your custom changes.

Regards.

Hello Eric, there is no errors since is a styling problem, in fact i can see svg-icon-color mixin is missing in 8.1.0, also in webpack changing fonticons to fonticon messed up the fonticons

Hi,

svg-icon-color mixin is no longer used and SVG icons colors are handed via fill="currentColor" lets to inherit color from parent element.

We suggest you to fully update the laravel/resources/assets and merge back your custom changes.

Regards.

Also pagination with datatables is broken

Hi,

Please refer to the new version of the curd with a slighly updated pagination control.

Regards.

Hi,

As can be seen in the preview. Please make sure your icon source is updated as well.

If the issue still persists can you please paste here the code you are having an issue with?

Regards.

You can inspect the same preview link you sent and try to add svg-icon-danger to the account svg icon and you'll see its not working since its getting overrided by this:

.aside-dark .menu .menu-item .menu-link .menu-icon, .aside-dark .menu .menu-item .menu-link .menu-icon .svg-icon, .aside-dark .menu .menu-item .menu-link .menu-icon i {
color: #494b74;
}

Hello Sean,

I've made a fresh installation and I can confirm it has the same issue:
I tried to put svg-icon-danger to the account icon, and it just doesnt work.

https://imgur.com/mFJmAS1 this is a untouched version

The menu icons' colors are ser via SASS code to match the menu design. The SVG color utility classes work but they do not override the menu icon colors. In the content, you can apply colors to the SVG icons using those classes.

They are getting overrided

https://imgur.com/XNjZacL

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  :(