Adding icons
Hi,
I need some advice on adding new icons to the IconButton so they behave the same way as the icons/buttons provided by Metronic UI.
I tried adding my own icons to the "visuals" section, but when I use them in a button, they don't behave like the Metronic UI icons.
Specifically, when I hover over a button with a new icon, the icon stays black or the color I set, instead of changing color on hover. I like the "light" variants of the IconButton, but when I use custom icons, the icon color doesn't change on hover.
Could you please help me figure out how to make my custom icons change color on hover, just like the Metronic UI icons?
Thank you!
Replies (9)
Hello,
Thank you for reaching out to us.
Can you please give us a link to yours Figma File , we would look and understand how to help You.
Regards.
Sure, here it is...
https://www.figma.com/proto/WpQ2nLQ5dXgirskLY6A7G9/Dashboard?node-id=59-355&t=5xcC1ywp7VlR67gp-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1
I would like to have the icons in blue, and on hover to be white.
Hi!
Thanks for sharing it. However it looks like a prototype. Can you please share it in a different way, so I could get a copy and try to edit icons?
Definitely issue is with the way icons crated. You may first try to flatten all the icon layers. It may help, otherwise we will do our best to make it work.
Best regards,
Bob
Hi,
May I know which Metronic version and framework are you using?
Making custom icons is not covered by our support since it requires icon design, and compilation in order to work it as web icons in HTML templates. You can consider existing icon sets that Metronic support. Font Awesome Free, Bootstrap Icons and Keenicons.
Regards.
I am working in Figma only for now. Using UI kit 1.2 or metronic9.
I am trying to include and introduce some new icons https://iconoir.com/.
When I place the new icon within the IconButton, the rollover doesn't change the color of the icon itself, but it stays black.
I also tried placing svg icon (as a workaround) within the existing icons provided in Figma with the hope it will show as intended,... also unsuccessfully.
Hi,
Noted, I will assign this case to our UI designer.
May I know if you have purchased Metronic from
Themeforest as our support is provided for valid buyers?
Regards.
Yes, purchased recently from here: https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469 on the 10th of July.
Hi,
Great! Our designer will get back to you asap.
Regards.
