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".

Add to cart button without icon

  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'}}) }}

Add to cart button with icon