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