Icons
!important
to change the SIZE, you must use @mixin icon-size
to change the STYLES, you must use @mixin icon-styles
p.s. these mixins apply styles to all types of icons (Feather icons, Unicons, spritemap.svg) in umbraco templates
p.s. to change the color for a FILL or STROKE, you can use the COLOR property for the parents or the icon itself, because the fill and stroke have the currentColor property by default
1) Feather icons <i
data-feather="battery-charging"></i>
https://github.com/feathericons/feather/tree/main?tab=readme-ov-file
https://feathericons.com/
2) Unicons
https://github.com/Iconscout/unicons
Used only in umbraco templates
3) spritemap.svg
<svg class="svg-icon {ICON_NAME}">
<use xlink:href="../images/spritemap/spritemap.svg#{ICON_NAME}"></use>
</svg>
|
icon-about-smp |
icon-employee-resources |
icon-engineered-solutions |
icon-external-link |
|
icon-external-link-circle |
icon-eye |
icon-file-item |
icon-financial-performance |
|
icon-get-in-touch |
icon-globe |
icon-international-markets |
icon-investor-relations |
|
icon-latest-news |
icon-leadership |
icon-location |
icon-mail |
|
icon-messages |
icon-parts-and-products |
icon-pdf |
icon-phone |
|
icon-play |
icon-search |
icon-special-markets |
icon-star-transparent |
|
icon-stock-market-item |
icon-temperature-control |
icon-vehicle-control |
|
|
icon-star |
icon-heart |
icon-info |
icon-bank |
|
icon-chart |
icon-download |
icon-arrow-next-down |
|
|
icon-arrow-prev-up |
icon-plus |
icon-minus |
icon-arrow-prev |
|
icon-arrow-next |
icon-contacts |
icon-guide |
icon-up-circle |
|
icon-pause-circle |
icon-calendar |
icon-chart-circle |
icon-progress |
|
icon-x-social |
icon-linked-in |
icon-checkmark |
icon-trash |
|
icon-scan |
icon-mobile |
icon-direction |
|
|
icon-equal |
icon-rotate-left |
icon-rotate-right |
icon-file-text |