Adding an Icon into a Button¶

When designing your custom online store based on Shopsys Platform, you might want to add an icon to some submit buttons on the front-end. This is achievable very quickly by using special CSS classes. Let us demonstrate it on the "Add to cart button".

1. Open the corresponding twig template - templates/Front/Inline/Cart/productAction.html.twig
2. Find the line where the submit button is rendered and add 3 CSS classes:
   • btn--with-icon
   • btn--with-icon--right if you want to display the icon after the label or btn--with-icon--left if you want to display the icon before the label
   • svg-iconname (svg icons are generated by Webpack, list of supported icons can be found in docs/generated/webfont-front-svg.html in your project)

{{ form_widget(form.add, {label: 'Add to cart'|trans, attr: {class: 'btn--success btn--with-icon btn--with-icon--left svg-cart'}}) }}