introduce new class to remove svg width

Author: deniak

assets-src/styles/sass/30-base/_icons.scss

@@ -6,7 +6,7 @@ svg {
 	fill: currentColor;
 	height: auto;
 
-	 &:not(.svg-inline--fa, .icon--submenu) {
+	 &:not(.svg-inline--fa, .icon--no-width) {
 		width: 100%;
  	}
 }

public/dist/assets/styles/core.css

@@ -1522,7 +1522,7 @@ svg {
   fill: currentColor;
   height: auto;
 }
-svg:not(.svg-inline--fa, .icon--submenu) {
+svg:not(.svg-inline--fa, .icon--no-width) {
   width: 100%;
 }
 

public/dist/assets/styles/core.min.css

@@ -30,7 +30,7 @@
 					{% if card.icon is defined and card.icon %}
 						{{ card.icon.inline|markup_attrs({
 							'aria-hidden': 'true',
-							'class': 'icon icon--larger',
+							'class': 'icon icon--larger icon--no-width',
 							'focusable': 'false',
 							'height': '1em',
 							'width': '1em'
@@ -41,4 +41,4 @@
 		{% endfor %}
 	</ul>
 	{% endif %}
-</div>
+</div>

templates/components/columns_with_icons.html.twig

@@ -11,7 +11,7 @@
         <ul class="clean-list" data-component="nav-double-intro">
             {% for navItem in navigation %}
                 <li class="top-nav-item has-children">
-                    <a href="{{ navItem.titleLink }}" class="nav-link">{{ navItem.title }} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" height="16" width="16" class="icon icon--submenu" focusable="false" aria-hidden="true" fill="currentColor" style="visibility: hidden"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"/></svg></a>
+                    <a href="{{ navItem.titleLink }}" class="nav-link">{{ navItem.title }} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" height="16" width="16" class="icon icon--submenu icon--no-width" focusable="false" aria-hidden="true" fill="currentColor" style="visibility: hidden"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"/></svg></a>
                     <div class="nav__submenu" data-nav="submenu" style="display: none;">
                         <div class="l-center">
                             <div class="nav__submenu__intro">
@@ -30,7 +30,7 @@
                                     {% for child in navItem.children %}
                                         <li {{ child.startNewColumn is defined and child.startNewColumn ? 'class="break-after"' : '' }}>
                                             <a class="with-icon--before with-icon--larger" href="{{ child.url }}">
-                                                <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em">
+                                                <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger icon--no-width" focusable="false" aria-hidden="true" width="1em" height="1em">
                                                     <path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/>
                                                     <path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/>
                                                 </svg>