@bonniernews/dn-design-system-web 3.0.0-alpha.8 → 3.0.0-alpha.81

package/foundations/icons/icon.njk

@@ -1,358 +1,382 @@
 {# This is an auto-generated file #}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% macro Icon(params) %}
-  {% set iconName = params.icon | lower %} 
-  {% if iconName == "add" %}
-    <i class="ds-icon ds-icon--add">
+  {%- set iconName = params.icon | lower %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+
+  {%- if iconName == "add" %}
+    <i class="ds-icon ds-icon--add {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.35 19.16V13.16H5.34998V11.66H11.35V5.66H12.85V11.66H18.85V13.16H12.85V19.16H11.35Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "arrow_back" %}
-    <i class="ds-icon ds-icon--arrow_back">
+  {%- if iconName == "arrow_back" %}
+    <i class="ds-icon ds-icon--arrow_back {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.3124 19.8083L4.68744 12.1833L12.3124 4.55835L13.3874 5.63335L7.56244 11.4333H19.9374V12.9333H7.56244L13.3874 18.7333L12.3124 19.8083Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "arrow_forward" %}
-    <i class="ds-icon ds-icon--arrow_forward">
+  {%- if iconName == "arrow_forward" %}
+    <i class="ds-icon ds-icon--arrow_forward {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 19.625L10.925 18.55L16.75 12.75H4.375V11.25H16.75L10.925 5.45L12 4.375L19.625 12L12 19.625Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "arrow_outward" %}
-    <i class="ds-icon ds-icon--arrow_outward">
+  {%- if iconName == "arrow_outward" %}
+    <i class="ds-icon ds-icon--arrow_outward {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.4001 17.65L5.3501 16.6L15.2001 6.75H6.2501V5.25H17.7501V16.75H16.2501V7.8L6.4001 17.65Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "bookmark-filled" %}
-    <i class="ds-icon ds-icon--bookmark-filled">
+  {%- if iconName == "bookmark-filled" %}
+    <i class="ds-icon ds-icon--bookmark-filled {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 20.25V3.5H18.5V20.25L12 17.45L5.5 20.25Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "bookmarked" %}
-    <i class="ds-icon ds-icon--bookmarked">
+  {%- if iconName == "bookmarked" %}
+    <i class="ds-icon ds-icon--bookmarked {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 17.95L12 15.8L17 17.95V5H7V17.95ZM5.5 20.25V3.5H18.5V20.25L12 17.45L5.5 20.25Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "campaign" %}
-    <i class="ds-icon ds-icon--campaign">
+  {%- if iconName == "campaign" %}
+    <i class="ds-icon ds-icon--campaign {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.95 12.75V11.25H21.5751V12.75H17.95ZM19.1 19.475L16.2 17.3L17.125 16.125L20.025 18.275L19.1 19.475ZM17.075 7.85L16.175 6.65L19.0751 4.475L19.975 5.675L17.075 7.85ZM5.25005 18.475V14.575H4.22505C3.72505 14.575 3.30005 14.4 2.95005 14.05C2.60005 13.7 2.42505 13.275 2.42505 12.775V11.225C2.42505 10.725 2.60005 10.3 2.95005 9.95C3.30005 9.6 3.72505 9.425 4.22505 9.425H8.10005L12.575 6.75V17.25L8.10005 14.575H6.75005V18.475H5.25005ZM13.95 15.125V8.875C14.35 9.24167 14.671 9.69167 14.913 10.225C15.1544 10.7583 15.275 11.35 15.275 12C15.275 12.65 15.1544 13.2417 14.913 13.775C14.671 14.3083 14.35 14.7583 13.95 15.125ZM4.22505 10.925C4.15838 10.925 4.09172 10.9583 4.02505 11.025C3.95838 11.0917 3.92505 11.1583 3.92505 11.225V12.775C3.92505 12.8417 3.95838 12.9083 4.02505 12.975C4.09172 13.0417 4.15838 13.075 4.22505 13.075H8.50005L11.075 14.575V9.425L8.50005 10.925H4.22505Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "cancel" %}
-    <i class="ds-icon ds-icon--cancel">
+  {%- if iconName == "cancel" %}
+    <i class="ds-icon ds-icon--cancel {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.4 16.65L12 13.05L15.6 16.65L16.65 15.6L13.05 12L16.65 8.4L15.6 7.35L12 10.95L8.4 7.35L7.35 8.4L10.95 12L7.35 15.6L8.4 16.65ZM12 21.5C10.6833 21.5 9.446 21.25 8.288 20.75C7.12933 20.25 6.125 19.575 5.275 18.725C4.425 17.875 3.75 16.8707 3.25 15.712C2.75 14.554 2.5 13.3167 2.5 12C2.5 10.6833 2.75 9.44567 3.25 8.287C3.75 7.129 4.425 6.125 5.275 5.275C6.125 4.425 7.12933 3.75 8.288 3.25C9.446 2.75 10.6833 2.5 12 2.5C13.3167 2.5 14.5543 2.75 15.713 3.25C16.871 3.75 17.875 4.425 18.725 5.275C19.575 6.125 20.25 7.129 20.75 8.287C21.25 9.44567 21.5 10.6833 21.5 12C21.5 13.3167 21.25 14.554 20.75 15.712C20.25 16.8707 19.575 17.875 18.725 18.725C17.875 19.575 16.871 20.25 15.713 20.75C14.5543 21.25 13.3167 21.5 12 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "celebration" %}
-    <i class="ds-icon ds-icon--celebration">
+  {%- if iconName == "celebration" %}
+    <i class="ds-icon ds-icon--celebration {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.80005 20.925L7.17505 8.65L15.075 16.55L2.80005 20.925ZM5.27505 18.45L12.325 15.95L7.77505 11.4L5.27505 18.45ZM13.975 12.45L13.15 11.625L20.4501 4.3L22.75 6.625L21.925 7.45L20.4501 5.975L13.975 12.45ZM10.325 8.8L9.50005 7.95L11.175 6.275L9.45005 4.575L10.3 3.725L12.85 6.275L10.325 8.8ZM12.15 10.625L11.325 9.8L15.8 5.325L13.325 2.85L14.15 2L17.475 5.325L12.15 10.625ZM15.8 14.275L14.975 13.45L18.125 10.3L21.275 13.45L20.425 14.275L18.125 11.975L15.8 14.275Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "check_box_outline_blank" %}
-    <i class="ds-icon ds-icon--check_box_outline_blank">
+  {%- if iconName == "check_box_outline_blank" %}
+    <i class="ds-icon ds-icon--check_box_outline_blank {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.3 20.5C4.8 20.5 4.375 20.325 4.025 19.975C3.675 19.625 3.5 19.2 3.5 18.7V5.3C3.5 4.8 3.675 4.375 4.025 4.025C4.375 3.675 4.8 3.5 5.3 3.5H18.7C19.2 3.5 19.625 3.675 19.975 4.025C20.325 4.375 20.5 4.8 20.5 5.3V18.7C20.5 19.2 20.325 19.625 19.975 19.975C19.625 20.325 19.2 20.5 18.7 20.5H5.3ZM5.3 19H18.7C18.7667 19 18.8333 18.9667 18.9 18.9C18.9667 18.8333 19 18.7667 19 18.7V5.3C19 5.23333 18.9667 5.16667 18.9 5.1C18.8333 5.03333 18.7667 5 18.7 5H5.3C5.23333 5 5.16667 5.03333 5.1 5.1C5.03333 5.16667 5 5.23333 5 5.3V18.7C5 18.7667 5.03333 18.8333 5.1 18.9C5.16667 18.9667 5.23333 19 5.3 19Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "check_box-filled" %}
-    <i class="ds-icon ds-icon--check_box-filled">
+  {%- if iconName == "check_box-filled" %}
+    <i class="ds-icon ds-icon--check_box-filled {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.3 20.5C4.8 20.5 4.375 20.325 4.025 19.975C3.675 19.625 3.5 19.2 3.5 18.7V5.3C3.5 4.8 3.675 4.375 4.025 4.025C4.375 3.675 4.8 3.5 5.3 3.5H18.7C19.2 3.5 19.625 3.675 19.975 4.025C20.325 4.375 20.5 4.8 20.5 5.3V18.7C20.5 19.2 20.325 19.625 19.975 19.975C19.625 20.325 19.2 20.5 18.7 20.5H5.3ZM10.6 15.475C10.7167 15.475 10.8293 15.454 10.938 15.412C11.046 15.3707 11.1417 15.3083 11.225 15.225L16.825 9.625C16.9583 9.49167 17.025 9.325 17.025 9.125C17.025 8.925 16.95 8.75 16.8 8.6C16.65 8.45 16.4707 8.375 16.262 8.375C16.054 8.375 15.8833 8.45 15.75 8.6L10.6 13.75L8.25 11.4C8.11667 11.2667 7.95 11.2 7.75 11.2C7.55 11.2 7.375 11.275 7.225 11.425C7.075 11.575 7 11.75 7 11.95C7 12.15 7.075 12.325 7.225 12.475L9.975 15.225C10.0583 15.3083 10.1543 15.3707 10.263 15.412C10.371 15.454 10.4833 15.475 10.6 15.475Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "check_circle" %}
-    <i class="ds-icon ds-icon--check_circle">
+  {%- if iconName == "check_circle" %}
+    <i class="ds-icon ds-icon--check_circle {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.575 16.25L17.3 9.525L16.25 8.475L10.575 14.15L7.725 11.3L6.675 12.35L10.575 16.25ZM12 21.5C10.6833 21.5 9.446 21.25 8.288 20.75C7.12933 20.25 6.125 19.575 5.275 18.725C4.425 17.875 3.75 16.8707 3.25 15.712C2.75 14.554 2.5 13.3167 2.5 12C2.5 10.6833 2.75 9.44567 3.25 8.287C3.75 7.129 4.425 6.125 5.275 5.275C6.125 4.425 7.12933 3.75 8.288 3.25C9.446 2.75 10.6833 2.5 12 2.5C13.3167 2.5 14.5543 2.75 15.713 3.25C16.871 3.75 17.875 4.425 18.725 5.275C19.575 6.125 20.25 7.129 20.75 8.287C21.25 9.44567 21.5 10.6833 21.5 12C21.5 13.3167 21.25 14.554 20.75 15.712C20.25 16.8707 19.575 17.875 18.725 18.725C17.875 19.575 16.871 20.25 15.713 20.75C14.5543 21.25 13.3167 21.5 12 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "check" %}
-    <i class="ds-icon ds-icon--check">
+  {%- if iconName == "check" %}
+    <i class="ds-icon ds-icon--check {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.78502 17.48L4.46002 12.155L5.51002 11.08L9.78502 15.355L18.96 6.18L20.01 7.255L9.78502 17.48Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "chevron_left" %}
-    <i class="ds-icon ds-icon--chevron_left">
+  {%- if iconName == "chevron_left" %}
+    <i class="ds-icon ds-icon--chevron_left {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 17.65L8.34998 12L14 6.35L15.05 7.4L10.45 12L15.05 16.6L14 17.65Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "chevron_right" %}
-    <i class="ds-icon ds-icon--chevron_right">
+  {%- if iconName == "chevron_right" %}
+    <i class="ds-icon ds-icon--chevron_right {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.39997 17.65L8.34998 16.6L12.95 12L8.34998 7.4L9.39997 6.35L15.05 12L9.39997 17.65Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "close" %}
-    <i class="ds-icon ds-icon--close">
+  {%- if iconName == "close" %}
+    <i class="ds-icon ds-icon--close {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.98237 18.7439L4.93237 17.6939L10.5324 12.0939L4.93237 6.4939L5.98237 5.4439L11.5824 11.0439L17.1824 5.4439L18.2324 6.4939L12.6324 12.0939L18.2324 17.6939L17.1824 18.7439L11.5824 13.1439L5.98237 18.7439Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "comment" %}
-    <i class="ds-icon ds-icon--comment">
+  {%- if iconName == "comment" %}
+    <i class="ds-icon ds-icon--comment {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.25 13.75H17.75V12.25H6.25V13.75ZM6.25 10.75H17.75V9.25H6.25V10.75ZM6.25 7.75H17.75V6.25H6.25V7.75ZM21.5 21.05L17.95 17.5H2.5V2.5H21.5V21.05ZM20 4H4V16H18.575L20 17.425V4Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "delete" %}
-    <i class="ds-icon ds-icon--delete">
+  {%- if iconName == "delete" %}
+    <i class="ds-icon ds-icon--delete {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 20.5V6H4.5V4.5H9V3.625H15V4.5H19.5V6H18.5V20.5H5.5ZM7 19H17V6H7V19ZM9.4 17H10.9V8H9.4V17ZM13.1 17H14.6V8H13.1V17Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "edit" %}
-    <i class="ds-icon ds-icon--edit">
+  {%- if iconName == "download" %}
+    <i class="ds-icon ds-icon--download {{ params.classNames }}" {{- attributes | safe }}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.3077 19.5C5.80257 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V15H5.99997V17.6923C5.99997 17.7692 6.03202 17.8397 6.09612 17.9038C6.16024 17.9679 6.23077 18 6.3077 18H17.6922C17.7692 18 17.8397 17.9679 17.9038 17.9038C17.9679 17.8397 18 17.7692 18 17.6923V15H19.5V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6922 19.5H6.3077ZM12 15.6154L7.7308 11.3462L8.78462 10.2616L11.25 12.727V4.32695H12.7499V12.727L15.2153 10.2616L16.2692 11.3462L12 15.6154Z"/></svg>
+    </i>
+  {% endif %}
+  {%- if iconName == "edit" %}
+    <i class="ds-icon ds-icon--edit {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.1499 19H6.3999L15.6499 9.75L14.4249 8.5L5.1499 17.775V19ZM18.8499 8.65L15.4749 5.3L16.7749 4C17.0749 3.71667 17.4376 3.575 17.8629 3.575C18.2876 3.575 18.6416 3.71667 18.9249 4L20.1499 5.225C20.4332 5.525 20.5832 5.879 20.5999 6.287C20.6166 6.69567 20.4749 7.04167 20.1749 7.325L18.8499 8.65ZM17.7749 9.75L7.0249 20.5H3.6499V17.125L14.3999 6.375L17.7749 9.75ZM15.0249 9.125L14.4249 8.5L15.6499 9.75L15.0249 9.125Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "expand_less" %}
-    <i class="ds-icon ds-icon--expand_less">
+  {%- if iconName == "expand_less" %}
+    <i class="ds-icon ds-icon--expand_less {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.39998 15.05L6.34998 13.975L12 8.325L17.65 13.975L16.6 15.05L12 10.45L7.39998 15.05Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "expand_more" %}
-    <i class="ds-icon ds-icon--expand_more">
+  {%- if iconName == "expand_more" %}
+    <i class="ds-icon ds-icon--expand_more {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 15.05L6.34998 9.375L7.39998 8.325L12 12.925L16.6 8.325L17.65 9.375L12 15.05Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "facebook" %}
-    <i class="ds-icon ds-icon--facebook">
+  {%- if iconName == "facebook" %}
+    <i class="ds-icon ds-icon--facebook {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.525 9H14V7C14 5.968 14.084 5.318 15.563 5.318H17.431V2.138C16.522 2.044 15.608 1.998 14.693 2C11.98 2 10 3.657 10 6.699V9H7V13L10 12.999V22H14V12.997L17.066 12.996L17.525 9Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "favorite-filled" %}
-    <i class="ds-icon ds-icon--favorite-filled">
+  {%- if iconName == "favorite-filled" %}
+    <i class="ds-icon ds-icon--favorite-filled {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35L10.55 20.05C7.93333 17.7167 5.854 15.6873 4.312 13.962C2.77067 12.2373 2 10.4167 2 8.5C2 6.93333 2.525 5.625 3.575 4.575C4.625 3.525 5.93333 3 7.5 3C8.38333 3 9.21667 3.18733 10 3.562C10.7833 3.93733 11.45 4.45 12 5.1C12.55 4.45 13.2167 3.93733 14 3.562C14.7833 3.18733 15.6167 3 16.5 3C18.0667 3 19.375 3.525 20.425 4.575C21.475 5.625 22 6.93333 22 8.5C22 10.4167 21.2293 12.2373 19.688 13.962C18.146 15.6873 16.0667 17.7167 13.45 20.05L12 21.35Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "favorite" %}
-    <i class="ds-icon ds-icon--favorite">
+  {%- if iconName == "favorite" %}
+    <i class="ds-icon ds-icon--favorite {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 20.325L10.9 19.325C9.23333 17.825 7.85833 16.5333 6.775 15.45C5.69167 14.3667 4.83333 13.404 4.2 12.562C3.56667 11.7207 3.125 10.954 2.875 10.262C2.625 9.57067 2.5 8.86667 2.5 8.15C2.5 6.73333 2.97933 5.54567 3.938 4.587C4.896 3.629 6.08333 3.15 7.5 3.15C8.36667 3.15 9.19167 3.354 9.975 3.762C10.7583 4.17067 11.4333 4.75833 12 5.525C12.5667 4.75833 13.2417 4.17067 14.025 3.762C14.8083 3.354 15.6333 3.15 16.5 3.15C17.9167 3.15 19.104 3.629 20.062 4.587C21.0207 5.54567 21.5 6.73333 21.5 8.15C21.5 8.86667 21.375 9.57067 21.125 10.262C20.875 10.954 20.4333 11.7207 19.8 12.562C19.1667 13.404 18.3083 14.3667 17.225 15.45C16.1417 16.5333 14.7667 17.825 13.1 19.325L12 20.325ZM12 18.3C13.6 16.8667 14.9167 15.6333 15.95 14.6C16.9833 13.5667 17.8 12.6707 18.4 11.912C19 11.154 19.4167 10.4833 19.65 9.9C19.8833 9.31667 20 8.73333 20 8.15C20 7.15 19.6667 6.31667 19 5.65C18.3333 4.98333 17.5 4.65 16.5 4.65C15.7167 4.65 14.9873 4.875 14.312 5.325C13.6373 5.775 13.1083 6.4 12.725 7.2H11.275C10.875 6.38333 10.3417 5.754 9.675 5.312C9.00833 4.87067 8.28333 4.65 7.5 4.65C6.5 4.65 5.66667 4.98333 5 5.65C4.33333 6.31667 4 7.15 4 8.15C4 8.73333 4.11667 9.31667 4.35 9.9C4.58333 10.4833 5 11.154 5.6 11.912C6.2 12.6707 7.01667 13.5623 8.05 14.587C9.08333 15.6123 10.4 16.85 12 18.3Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "feed" %}
-    <i class="ds-icon ds-icon--feed">
+  {%- if iconName == "feed" %}
+    <i class="ds-icon ds-icon--feed {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.3 20.5C4.8 20.5 4.375 20.325 4.025 19.975C3.675 19.625 3.5 19.2 3.5 18.7V5.3C3.5 4.8 3.675 4.375 4.025 4.025C4.375 3.675 4.8 3.5 5.3 3.5H15.8L20.5 8.2V18.7C20.5 19.2 20.325 19.625 19.975 19.975C19.625 20.325 19.2 20.5 18.7 20.5H5.3ZM5.3 19H18.7C18.7833 19 18.8543 18.971 18.913 18.913C18.971 18.8543 19 18.7833 19 18.7V9H15V5H5.3C5.21667 5 5.146 5.02933 5.088 5.088C5.02933 5.146 5 5.21667 5 5.3V18.7C5 18.7833 5.02933 18.8543 5.088 18.913C5.146 18.971 5.21667 19 5.3 19ZM7.25 16.5H16.75V15H7.25V16.5ZM7.25 9H12V7.5H7.25V9ZM7.25 12.75H16.75V11.25H7.25V12.75Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "filter_none" %}
-    <i class="ds-icon ds-icon--filter_none">
+  {%- if iconName == "filter_list" %}
+    <i class="ds-icon ds-icon--filter_list {{ params.classNames }}" {{- attributes | safe }}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.25 17.75V16.25H13.75V17.75H10.25ZM6.25 12.5576V11.0577H17.75V12.5576H6.25ZM3.25 7.36535V5.86537H20.75V7.36535H3.25Z"/></svg>
+    </i>
+  {% endif %}
+  {%- if iconName == "filter_none" %}
+    <i class="ds-icon ds-icon--filter_none {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.25 18V3H21.25V18H6.25ZM7.75 16.5H19.75V4.5H7.75V16.5ZM2.75 21.5V6.8H4.25V20H17.45V21.5H2.75Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "format_size" %}
-    <i class="ds-icon ds-icon--format_size">
+  {%- if iconName == "format_size" %}
+    <i class="ds-icon ds-icon--format_size {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.45 19.55V6.55H9.44995V4.45H21.5499V6.55H16.55V19.55H14.45ZM5.44995 19.55V11.55H2.44995V9.45H10.55V11.55H7.54995V19.55H5.44995Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "grid_view" %}
-    <i class="ds-icon ds-icon--grid_view">
+  {%- if iconName == "grid_view" %}
+    <i class="ds-icon ds-icon--grid_view {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 11V3.5H11V11H3.5ZM3.5 20.5V13H11V20.5H3.5ZM13 11V3.5H20.5V11H13ZM13 20.5V13H20.5V20.5H13ZM5 9.5H9.5V5H5V9.5ZM14.5 9.5H19V5H14.5V9.5ZM14.5 19H19V14.5H14.5V19ZM5 19H9.5V14.5H5V19Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "headphones-filled" %}
-    <i class="ds-icon ds-icon--headphones-filled">
+  {%- if iconName == "headphones-filled" %}
+    <i class="ds-icon ds-icon--headphones-filled {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 20.5V12C3.5 10.8167 3.725 9.71267 4.175 8.688C4.625 7.66267 5.23333 6.76667 6 6C6.76667 5.23333 7.66267 4.625 8.688 4.175C9.71267 3.725 10.8167 3.5 12 3.5C13.1833 3.5 14.2873 3.725 15.312 4.175C16.3373 4.625 17.2333 5.23333 18 6C18.7667 6.76667 19.375 7.66267 19.825 8.688C20.275 9.71267 20.5 10.8167 20.5 12V20.5H15.45V13.425H19V12C19 10.05 18.3207 8.39567 16.962 7.037C15.604 5.679 13.95 5 12 5C10.05 5 8.396 5.679 7.038 7.037C5.67933 8.39567 5 10.05 5 12V13.425H8.55V20.5H3.5Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "headphones" %}
-    <i class="ds-icon ds-icon--headphones">
+  {%- if iconName == "headphones" %}
+    <i class="ds-icon ds-icon--headphones {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 20.5V12C3.5 10.8167 3.725 9.71267 4.175 8.688C4.625 7.66267 5.23333 6.76667 6 6C6.76667 5.23333 7.66267 4.625 8.688 4.175C9.71267 3.725 10.8167 3.5 12 3.5C13.1833 3.5 14.2873 3.725 15.312 4.175C16.3373 4.625 17.2333 5.23333 18 6C18.7667 6.76667 19.375 7.66267 19.825 8.688C20.275 9.71267 20.5 10.8167 20.5 12V20.5H15.45V13.425H19V12C19 10.05 18.3207 8.39567 16.962 7.037C15.604 5.679 13.95 5 12 5C10.05 5 8.396 5.679 7.038 7.037C5.67933 8.39567 5 10.05 5 12V13.425H8.55V20.5H3.5ZM5 19H7.05V14.925H5V19ZM16.95 19H19V14.925H16.95V19Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "history" %}
-    <i class="ds-icon ds-icon--history">
+  {%- if iconName == "history" %}
+    <i class="ds-icon ds-icon--history {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7091 20.6308C9.54239 20.6308 7.65472 19.9185 6.04606 18.4938C4.43806 17.0685 3.51739 15.2808 3.28406 13.1308H4.80906C5.05906 14.8642 5.83406 16.2975 7.13406 17.4308C8.43406 18.5642 9.95906 19.1308 11.7091 19.1308C13.6591 19.1308 15.3134 18.4515 16.6721 17.0928C18.0301 15.7348 18.7091 14.0808 18.7091 12.1308C18.7091 10.1808 18.0301 8.5265 16.6721 7.16783C15.3134 5.80983 13.6591 5.13083 11.7091 5.13083C10.6257 5.13083 9.60506 5.3725 8.64706 5.85583C7.68839 6.33916 6.86739 7.00583 6.18406 7.85583H8.78406V9.35583H3.70906V4.28083H5.20906V6.65583C6.02572 5.68916 7.00072 4.94316 8.13406 4.41783C9.26739 3.89316 10.4591 3.63083 11.7091 3.63083C12.8924 3.63083 14.0007 3.85583 15.0341 4.30583C16.0674 4.75583 16.9674 5.36416 17.7341 6.13083C18.5007 6.8975 19.1047 7.7935 19.5461 8.81883C19.9881 9.8435 20.2091 10.9475 20.2091 12.1308C20.2091 13.3142 19.9881 14.4182 19.5461 15.4428C19.1047 16.4682 18.5007 17.3642 17.7341 18.1308C16.9674 18.8975 16.0674 19.5058 15.0341 19.9558C14.0007 20.4058 12.8924 20.6308 11.7091 20.6308ZM14.7091 16.1558L10.9841 12.4308V7.13083H12.4841V11.8308L15.7591 15.1058L14.7091 16.1558Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "home-filled" %}
-    <i class="ds-icon ds-icon--home-filled">
+  {%- if iconName == "home-filled" %}
+    <i class="ds-icon ds-icon--home-filled {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 20.5V9.25L12 3.625L19.5 9.25V20.5H13.925V13.8H10.075V20.5H4.5Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "home" %}
-    <i class="ds-icon ds-icon--home">
+  {%- if iconName == "home" %}
+    <i class="ds-icon ds-icon--home {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 20.495V9.245L12 3.62L19.5 9.245V20.495H13.925V13.795H10.075V20.495H4.5ZM6 18.995H8.575V12.295H15.425V18.995H18V9.995L12 5.495L6 9.995V18.995Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "info-filled" %}
-    <i class="ds-icon ds-icon--info-filled">
+  {%- if iconName == "info-filled" %}
+    <i class="ds-icon ds-icon--info-filled {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.49 16.58H12.99V10.83H11.49V16.58ZM12.24 9.13C12.4733 9.13 12.665 9.05067 12.815 8.892C12.965 8.734 13.04 8.53833 13.04 8.305C13.04 8.08833 12.965 7.90067 12.815 7.742C12.665 7.584 12.4733 7.505 12.24 7.505C12.0067 7.505 11.815 7.584 11.665 7.742C11.515 7.90067 11.44 8.08833 11.44 8.305C11.44 8.53833 11.515 8.734 11.665 8.892C11.815 9.05067 12.0067 9.13 12.24 9.13ZM12.24 21.33C10.9233 21.33 9.68599 21.08 8.52799 20.58C7.36932 20.08 6.36499 19.405 5.51499 18.555C4.66499 17.705 3.98999 16.7007 3.48999 15.542C2.98999 14.384 2.73999 13.1467 2.73999 11.83C2.73999 10.5133 2.98999 9.27567 3.48999 8.117C3.98999 6.959 4.66499 5.955 5.51499 5.105C6.36499 4.255 7.36932 3.58 8.52799 3.08C9.68599 2.58 10.9233 2.33 12.24 2.33C13.5567 2.33 14.7943 2.58 15.953 3.08C17.111 3.58 18.115 4.255 18.965 5.105C19.815 5.955 20.49 6.959 20.99 8.117C21.49 9.27567 21.74 10.5133 21.74 11.83C21.74 13.1467 21.49 14.384 20.99 15.542C20.49 16.7007 19.815 17.705 18.965 18.555C18.115 19.405 17.111 20.08 15.953 20.58C14.7943 21.08 13.5567 21.33 12.24 21.33Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "info" %}
-    <i class="ds-icon ds-icon--info">
+  {%- if iconName == "info" %}
+    <i class="ds-icon ds-icon--info {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.25 16.75H12.75V11H11.25V16.75ZM12 9.3C12.2333 9.3 12.425 9.22067 12.575 9.062C12.725 8.904 12.8 8.70833 12.8 8.475C12.8 8.25833 12.725 8.07067 12.575 7.912C12.425 7.754 12.2333 7.675 12 7.675C11.7667 7.675 11.575 7.754 11.425 7.912C11.275 8.07067 11.2 8.25833 11.2 8.475C11.2 8.70833 11.275 8.904 11.425 9.062C11.575 9.22067 11.7667 9.3 12 9.3ZM12 21.5C10.6833 21.5 9.446 21.25 8.288 20.75C7.12933 20.25 6.125 19.575 5.275 18.725C4.425 17.875 3.75 16.8707 3.25 15.712C2.75 14.554 2.5 13.3167 2.5 12C2.5 10.6833 2.75 9.44567 3.25 8.287C3.75 7.129 4.425 6.125 5.275 5.275C6.125 4.425 7.12933 3.75 8.288 3.25C9.446 2.75 10.6833 2.5 12 2.5C13.3167 2.5 14.5543 2.75 15.713 3.25C16.871 3.75 17.875 4.425 18.725 5.275C19.575 6.125 20.25 7.129 20.75 8.287C21.25 9.44567 21.5 10.6833 21.5 12C21.5 13.3167 21.25 14.554 20.75 15.712C20.25 16.8707 19.575 17.875 18.725 18.725C17.875 19.575 16.871 20.25 15.713 20.75C14.5543 21.25 13.3167 21.5 12 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "instagram" %}
-    <i class="ds-icon ds-icon--instagram">
+  {%- if iconName == "instagram" %}
+    <i class="ds-icon ds-icon--instagram {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.25 2.5C5.08319 2.5 2.5 5.08319 2.5 8.25V15.75C2.5 18.9164 5.0831 21.5 8.25 21.5H15.75C18.9165 21.5 21.5 18.9165 21.5 15.75V8.25C21.5 5.0831 18.9164 2.5 15.75 2.5H8.25ZM8.25 4H15.75C18.1056 4 20 5.8939 20 8.25V15.75C20 18.1055 18.1055 20 15.75 20H8.25C5.8939 20 4 18.1056 4 15.75V8.25C4 5.89381 5.89381 4 8.25 4ZM17 6C16.4475 6 16 6.4475 16 7C16 7.5525 16.4475 8 17 8C17.5525 8 18 7.5525 18 7C18 6.4475 17.5525 6 17 6ZM12 7C9.24759 7 7 9.24759 7 12C7 14.7524 9.24759 17 12 17C14.7524 17 17 14.7524 17 12C17 9.24759 14.7524 7 12 7ZM12 8.5C13.9416 8.5 15.5 10.0584 15.5 12C15.5 13.9416 13.9416 15.5 12 15.5C10.0584 15.5 8.5 13.9416 8.5 12C8.5 10.0584 10.0584 8.5 12 8.5Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "integrity" %}
-    <i class="ds-icon ds-icon--integrity">
+  {%- if iconName == "integrity" %}
+    <i class="ds-icon ds-icon--integrity {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 17C17.4167 17 17.7707 16.854 18.062 16.562C18.354 16.2707 18.5 15.9167 18.5 15.5C18.5 15.0833 18.354 14.7293 18.062 14.438C17.7707 14.146 17.4167 14 17 14C16.5833 14 16.2293 14.146 15.938 14.438C15.646 14.7293 15.5 15.0833 15.5 15.5C15.5 15.9167 15.646 16.2707 15.938 16.562C16.2293 16.854 16.5833 17 17 17ZM17 20C17.5167 20 17.9917 19.879 18.425 19.637C18.8583 19.3957 19.2083 19.075 19.475 18.675C19.1083 18.4583 18.7167 18.2917 18.3 18.175C17.8833 18.0583 17.45 18 17 18C16.55 18 16.1167 18.0583 15.7 18.175C15.2833 18.2917 14.8917 18.4583 14.525 18.675C14.7917 19.075 15.1417 19.3957 15.575 19.637C16.0083 19.879 16.4833 20 17 20ZM12 21.475C9.83333 20.8917 8.04167 19.621 6.625 17.663C5.20833 15.7043 4.5 13.5167 4.5 11.1V5.35L12 2.55L19.5 5.35V11C19.2667 10.9167 19.021 10.8373 18.763 10.762C18.5043 10.6873 18.25 10.625 18 10.575V6.4L12 4.15L6 6.4V11.1C6 11.9833 6.125 12.846 6.375 13.688C6.625 14.5293 6.971 15.3207 7.413 16.062C7.85433 16.804 8.37933 17.4667 8.988 18.05C9.596 18.6333 10.2583 19.1 10.975 19.45L11 19.425C11.1333 19.7917 11.3043 20.1417 11.513 20.475C11.721 20.8083 11.9583 21.1167 12.225 21.4C12.1917 21.4167 12.1583 21.4293 12.125 21.438C12.0917 21.446 12.05 21.4583 12 21.475ZM17 21.5C15.75 21.5 14.6873 21.0627 13.812 20.188C12.9373 19.3127 12.5 18.25 12.5 17C12.5 15.75 12.9373 14.6873 13.812 13.812C14.6873 12.9373 15.75 12.5 17 12.5C18.25 12.5 19.3127 12.9373 20.188 13.812C21.0627 14.6873 21.5 15.75 21.5 17C21.5 18.25 21.0627 19.3127 20.188 20.188C19.3127 21.0627 18.25 21.5 17 21.5Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "ios_share" %}
-    <i class="ds-icon ds-icon--ios_share">
+  {%- if iconName == "ios_share" %}
+    <i class="ds-icon ds-icon--ios_share {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.25 14.9V3.875L9.4 5.725L8.35 4.65L12 1L15.65 4.65L14.6 5.725L12.75 3.875V14.9H11.25ZM4.5 21.65V7.65H8.875V9.15H6V20.15H18V9.15H15.125V7.65H19.5V21.65H4.5Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "lock" %}
-    <i class="ds-icon ds-icon--lock">
+  {%- if iconName == "lock" %}
+    <i class="ds-icon ds-icon--lock {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.73999 21.33V8.33H7.73999V6.33C7.73999 5.08 8.17732 4.01733 9.05199 3.142C9.92732 2.26733 10.99 1.83 12.24 1.83C13.49 1.83 14.5527 2.26733 15.428 3.142C16.3027 4.01733 16.74 5.08 16.74 6.33V8.33H19.74V21.33H4.73999ZM9.23999 8.33H15.24V6.33C15.24 5.49667 14.9483 4.78833 14.365 4.205C13.7817 3.62167 13.0733 3.33 12.24 3.33C11.4067 3.33 10.6983 3.62167 10.115 4.205C9.53166 4.78833 9.23999 5.49667 9.23999 6.33V8.33ZM6.23999 19.83H18.24V9.83H6.23999V19.83ZM12.24 16.58C12.7233 16.58 13.136 16.4093 13.478 16.068C13.8193 15.726 13.99 15.3133 13.99 14.83C13.99 14.3467 13.8193 13.934 13.478 13.592C13.136 13.2507 12.7233 13.08 12.24 13.08C11.7567 13.08 11.344 13.2507 11.002 13.592C10.6607 13.934 10.49 14.3467 10.49 14.83C10.49 15.3133 10.6607 15.726 11.002 16.068C11.344 16.4093 11.7567 16.58 12.24 16.58Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "logout" %}
-    <i class="ds-icon ds-icon--logout">
+  {%- if iconName == "logout" %}
+    <i class="ds-icon ds-icon--logout {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.4001 21C4.9001 21 4.4751 20.825 4.1251 20.475C3.7751 20.125 3.6001 19.7 3.6001 19.2V5.3C3.6001 4.8 3.7751 4.375 4.1251 4.025C4.4751 3.675 4.9001 3.5 5.4001 3.5H12.1251V5H5.4001C5.33343 5 5.26676 5.03333 5.2001 5.1C5.13343 5.16667 5.1001 5.23333 5.1001 5.3V19.2C5.1001 19.2667 5.13343 19.3333 5.2001 19.4C5.26676 19.4667 5.33343 19.5 5.4001 19.5H12.1251V21H5.4001ZM16.1251 16.525L15.1001 15.425L17.5251 13H9.1251V11.5H17.5251L15.1001 9.075L16.1251 7.975L20.4001 12.25L16.1251 16.525Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "mail" %}
-    <i class="ds-icon ds-icon--mail">
+  {%- if iconName == "mail" %}
+    <i class="ds-icon ds-icon--mail {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 19.5V4.5H21.5V19.5H2.5ZM12 12.55L4 7.45V18H20V7.45L12 12.55ZM12 11L19.85 6H4.15L12 11ZM4 7.45V6V11.85V7.45Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "manage_accounts-filled" %}
-    <i class="ds-icon ds-icon--manage_accounts-filled">
+  {%- if iconName == "manage_accounts-filled" %}
+    <i class="ds-icon ds-icon--manage_accounts-filled {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.1 20.05L15.875 18.725C15.6417 18.6583 15.421 18.5667 15.213 18.45C15.0043 18.3333 14.8 18.1917 14.6 18.025L13.35 18.45L12.625 17.25L13.675 16.4C13.5917 16.1333 13.55 15.875 13.55 15.625C13.55 15.375 13.5917 15.125 13.675 14.875L12.65 14L13.35 12.8L14.6 13.25C14.7833 13.0667 14.9833 12.9207 15.2 12.812C15.4167 12.704 15.6417 12.6167 15.875 12.55L16.1 11.225H17.525L17.75 12.55C17.9833 12.6167 18.2083 12.7083 18.425 12.825C18.6417 12.9417 18.8417 13.0917 19.025 13.275L20.275 12.8L20.975 14.025L19.95 14.9C20.0333 15.1333 20.075 15.3833 20.075 15.65C20.075 15.9167 20.0333 16.1667 19.95 16.4L21 17.25L20.275 18.45L19.025 18.025C18.825 18.1917 18.621 18.3333 18.413 18.45C18.2043 18.5667 17.9833 18.6583 17.75 18.725L17.525 20.05H16.1ZM2.5 19.3V17.075C2.5 16.575 2.62933 16.1207 2.888 15.712C3.146 15.304 3.50833 14.9833 3.975 14.75C4.79167 14.35 5.68333 14.0083 6.65 13.725C7.61667 13.4417 8.73333 13.3 10 13.3H10.288C10.3793 13.3 10.4667 13.3167 10.55 13.35C10.1667 14.3167 10.004 15.3333 10.062 16.4C10.1207 17.4667 10.425 18.4333 10.975 19.3H2.5ZM16.8 17.55C17.3333 17.55 17.7833 17.3627 18.15 16.988C18.5167 16.6127 18.7 16.1583 18.7 15.625C18.7 15.1083 18.5167 14.6623 18.15 14.287C17.7833 13.9123 17.3333 13.725 16.8 13.725C16.2833 13.725 15.8377 13.9123 15.463 14.287C15.0877 14.6623 14.9 15.1083 14.9 15.625C14.9 16.1583 15.0877 16.6127 15.463 16.988C15.8377 17.3627 16.2833 17.55 16.8 17.55ZM10 11.7C9.03333 11.7 8.20833 11.3583 7.525 10.675C6.84167 9.99168 6.5 9.16668 6.5 8.20001C6.5 7.23335 6.84167 6.40835 7.525 5.72501C8.20833 5.04168 9.03333 4.70001 10 4.70001C10.9667 4.70001 11.7917 5.04168 12.475 5.72501C13.1583 6.40835 13.5 7.23335 13.5 8.20001C13.5 9.16668 13.1583 9.99168 12.475 10.675C11.7917 11.3583 10.9667 11.7 10 11.7Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "manage_accounts" %}
-    <i class="ds-icon ds-icon--manage_accounts">
+  {%- if iconName == "manage_accounts" %}
+    <i class="ds-icon ds-icon--manage_accounts {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.25 11.4009C9.28333 11.4009 8.45833 11.0549 7.775 10.3629C7.09167 9.67161 6.75 8.85094 6.75 7.90094C6.75 6.93427 7.09167 6.10927 7.775 5.42594C8.45833 4.74261 9.28333 4.40094 10.25 4.40094C11.2167 4.40094 12.0417 4.74261 12.725 5.42594C13.4083 6.10927 13.75 6.93427 13.75 7.90094C13.75 8.85094 13.4083 9.67161 12.725 10.3629C12.0417 11.0549 11.2167 11.4009 10.25 11.4009ZM2.75 19.0009V16.7759C2.75 16.2759 2.87933 15.8216 3.138 15.4129C3.396 15.0049 3.75833 14.6843 4.225 14.4509C5.04167 14.0509 5.93333 13.7093 6.9 13.4259C7.86667 13.1426 8.98333 13.0009 10.25 13.0009H10.55C10.6333 13.0009 10.7167 13.0176 10.8 13.0509C10.7 13.2843 10.6167 13.5216 10.55 13.7629C10.4833 14.0049 10.4333 14.2509 10.4 14.5009H10.25C9.1 14.5009 8.07933 14.6343 7.188 14.9009C6.296 15.1676 5.53333 15.4676 4.9 15.8009C4.68333 15.9176 4.52067 16.0593 4.412 16.2259C4.304 16.3926 4.25 16.5759 4.25 16.7759V17.5009H10.55C10.6167 17.7676 10.7127 18.0299 10.838 18.2879C10.9627 18.5466 11.0917 18.7843 11.225 19.0009H2.75ZM16.35 19.7509L16.125 18.4259C15.8917 18.3593 15.671 18.2676 15.463 18.1509C15.2543 18.0343 15.05 17.8926 14.85 17.7259L13.6 18.1509L12.875 16.9509L13.925 16.1009C13.8417 15.8343 13.8 15.5759 13.8 15.3259C13.8 15.0759 13.8417 14.8259 13.925 14.5759L12.9 13.7009L13.6 12.5009L14.85 12.9509C15.0333 12.7676 15.2333 12.6216 15.45 12.5129C15.6667 12.4049 15.8917 12.3176 16.125 12.2509L16.35 10.9259H17.775L18 12.2509C18.2333 12.3176 18.4583 12.4093 18.675 12.5259C18.8917 12.6426 19.0917 12.7926 19.275 12.9759L20.525 12.5009L21.225 13.7259L20.2 14.6009C20.2833 14.8343 20.325 15.0843 20.325 15.3509C20.325 15.6176 20.2833 15.8676 20.2 16.1009L21.25 16.9509L20.525 18.1509L19.275 17.7259C19.075 17.8926 18.871 18.0343 18.663 18.1509C18.4543 18.2676 18.2333 18.3593 18 18.4259L17.775 19.7509H16.35ZM17.05 17.2509C17.5833 17.2509 18.0333 17.0636 18.4 16.6889C18.7667 16.3136 18.95 15.8593 18.95 15.3259C18.95 14.8093 18.7667 14.3633 18.4 13.9879C18.0333 13.6133 17.5833 13.4259 17.05 13.4259C16.5333 13.4259 16.0877 13.6133 15.713 13.9879C15.3377 14.3633 15.15 14.8093 15.15 15.3259C15.15 15.8593 15.3377 16.3136 15.713 16.6889C16.0877 17.0636 16.5333 17.2509 17.05 17.2509ZM10.25 9.90094C10.8 9.90094 11.271 9.70494 11.663 9.31294C12.0543 8.92161 12.25 8.45094 12.25 7.90094C12.25 7.35094 12.0543 6.87994 11.663 6.48794C11.271 6.09661 10.8 5.90094 10.25 5.90094C9.7 5.90094 9.22933 6.09661 8.838 6.48794C8.446 6.87994 8.25 7.35094 8.25 7.90094C8.25 8.45094 8.446 8.92161 8.838 9.31294C9.22933 9.70494 9.7 9.90094 10.25 9.90094Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "mark_email_unread" %}
-    <i class="ds-icon ds-icon--mark_email_unread">
+  {%- if iconName == "mark_email_unread" %}
+    <i class="ds-icon ds-icon--mark_email_unread {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.73999 19.325V4.325H14.565C14.515 4.575 14.49 4.825 14.49 5.075C14.49 5.325 14.5067 5.575 14.54 5.825H4.38999L12.24 10.825L15.84 8.525C16.0233 8.69167 16.215 8.84167 16.415 8.975C16.615 9.10833 16.8233 9.225 17.04 9.325L12.24 12.375L4.23999 7.275V17.825H20.24V9.85C20.5233 9.78333 20.79 9.7 21.04 9.6C21.29 9.5 21.5233 9.36667 21.74 9.2V19.325H2.73999ZM19.24 7.95C18.4733 7.95 17.8233 7.68333 17.29 7.15C16.7567 6.61667 16.49 5.96667 16.49 5.2C16.49 4.45 16.7567 3.80433 17.29 3.263C17.8233 2.721 18.4733 2.45 19.24 2.45C20.0067 2.45 20.6567 2.721 21.19 3.263C21.7233 3.80433 21.99 4.45 21.99 5.2C21.99 5.96667 21.7233 6.61667 21.19 7.15C20.6567 7.68333 20.0067 7.95 19.24 7.95Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "memory" %}
-    <i class="ds-icon ds-icon--memory">
+  {%- if iconName == "memory" %}
+    <i class="ds-icon ds-icon--memory {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.24998 20.275V18.5H5.49998V14.75H3.72498V13.25H5.49998V10.75H3.72498V9.25H5.49998V5.5H9.24998V3.725H10.75V5.5H13.25V3.725H14.75V5.5H18.5V9.25H20.275V10.75H18.5V13.25H20.275V14.75H18.5V18.5H14.75V20.275H13.25V18.5H10.75V20.275H9.24998ZM6.99998 17H17V7H6.99998V17ZM9.49998 14.5V9.5H14.5V14.5H9.49998ZM11 13H13V11H11V13Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "menu-filled" %}
-    <i class="ds-icon ds-icon--menu-filled">
+  {%- if iconName == "menu-filled" %}
+    <i class="ds-icon ds-icon--menu-filled {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.56244 17.8083V16.3083H21.0624V17.8083H3.56244ZM3.56244 12.9333V11.4333H21.0624V12.9333H3.56244ZM3.56244 8.05835V6.55835H21.0624V8.05835H3.56244Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "menu" %}
-    <i class="ds-icon ds-icon--menu">
+  {%- if iconName == "menu" %}
+    <i class="ds-icon ds-icon--menu {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.25 17.625V16.125H20.75V17.625H3.25ZM3.25 12.75V11.25H20.75V12.75H3.25ZM3.25 7.875V6.375H20.75V7.875H3.25Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "mode_comment" %}
-    <i class="ds-icon ds-icon--mode_comment">
+  {%- if iconName == "mode_comment" %}
+    <i class="ds-icon ds-icon--mode_comment {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 21.05L17.95 17.5H4.3C3.8 17.5 3.375 17.325 3.025 16.975C2.675 16.625 2.5 16.2 2.5 15.7V4.3C2.5 3.8 2.675 3.375 3.025 3.025C3.375 2.675 3.8 2.5 4.3 2.5H19.7C20.2 2.5 20.625 2.675 20.975 3.025C21.325 3.375 21.5 3.8 21.5 4.3V21.05ZM4 4.3V16H18.575L20 17.425V4.3C20 4.21667 19.971 4.14567 19.913 4.087C19.8543 4.029 19.7833 4 19.7 4H4.3C4.21667 4 4.146 4.029 4.088 4.087C4.02933 4.14567 4 4.21667 4 4.3ZM4 4.3V17.425V4V4.3Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "more_horiz" %}
-    <i class="ds-icon ds-icon--more_horiz">
+  {%- if iconName == "more_horiz" %}
+    <i class="ds-icon ds-icon--more_horiz {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.21997 13.5C5.8033 13.5 5.4493 13.354 5.15797 13.062C4.86597 12.7707 4.71997 12.4167 4.71997 12C4.71997 11.5833 4.86597 11.2293 5.15797 10.938C5.4493 10.646 5.8033 10.5 6.21997 10.5C6.63664 10.5 6.99097 10.646 7.28297 10.938C7.5743 11.2293 7.71997 11.5833 7.71997 12C7.71997 12.4167 7.5743 12.7707 7.28297 13.062C6.99097 13.354 6.63664 13.5 6.21997 13.5ZM11.995 13.5C11.5783 13.5 11.2243 13.354 10.933 13.062C10.641 12.7707 10.495 12.4167 10.495 12C10.495 11.5833 10.641 11.2293 10.933 10.938C11.2243 10.646 11.5783 10.5 11.995 10.5C12.4116 10.5 12.7656 10.646 13.057 10.938C13.349 11.2293 13.495 11.5833 13.495 12C13.495 12.4167 13.349 12.7707 13.057 13.062C12.7656 13.354 12.4116 13.5 11.995 13.5ZM17.77 13.5C17.3533 13.5 16.9993 13.354 16.708 13.062C16.416 12.7707 16.27 12.4167 16.27 12C16.27 11.5833 16.416 11.2293 16.708 10.938C16.9993 10.646 17.3533 10.5 17.77 10.5C18.1866 10.5 18.541 10.646 18.833 10.938C19.1243 11.2293 19.27 11.5833 19.27 12C19.27 12.4167 19.1243 12.7707 18.833 13.062C18.541 13.354 18.1866 13.5 17.77 13.5Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "notifications" %}
-    <i class="ds-icon ds-icon--notifications">
+  {%- if iconName == "notifications" %}
+    <i class="ds-icon ds-icon--notifications {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.25 18.875V17.375H6.25V10.125C6.25 8.79165 6.66667 7.59565 7.5 6.53699C8.33333 5.47899 9.41667 4.79999 10.75 4.49999V2.54999H13.25V4.49999C14.5833 4.79999 15.6667 5.47899 16.5 6.53699C17.3333 7.59565 17.75 8.79165 17.75 10.125V17.375H19.75V18.875H4.25ZM12 21.8C11.5 21.8 11.075 21.625 10.725 21.275C10.375 20.925 10.2 20.5 10.2 20H13.8C13.8 20.5 13.625 20.925 13.275 21.275C12.925 21.625 12.5 21.8 12 21.8ZM7.75 17.375H16.25V10.125C16.25 8.94165 15.8333 7.93732 15 7.11199C14.1667 6.28732 13.1667 5.87499 12 5.87499C10.8333 5.87499 9.83333 6.28732 9 7.11199C8.16667 7.93732 7.75 8.94165 7.75 10.125V17.375Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "person" %}
-    <i class="ds-icon ds-icon--person">
+  {%- if iconName == "pause" %}
+    <i class="ds-icon ds-icon--pause {{ params.classNames }}" {{- attributes | safe }}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 18.5V5.50003H17.75V18.5H14ZM6.25 18.5V5.50003H9.99997V18.5H6.25Z"/></svg>
+    </i>
+  {% endif %}
+  {%- if iconName == "person" %}
+    <i class="ds-icon ds-icon--person {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 11.7C11.0333 11.7 10.2083 11.354 9.525 10.662C8.84167 9.97066 8.5 9.15 8.5 8.2C8.5 7.23333 8.84167 6.40833 9.525 5.725C10.2083 5.04166 11.0333 4.7 12 4.7C12.9667 4.7 13.7917 5.04166 14.475 5.725C15.1583 6.40833 15.5 7.23333 15.5 8.2C15.5 9.15 15.1583 9.97066 14.475 10.662C13.7917 11.354 12.9667 11.7 12 11.7ZM4.5 19.3V17.075C4.5 16.5917 4.63333 16.1417 4.9 15.725C5.16667 15.3083 5.525 14.9833 5.975 14.75C6.95833 14.2667 7.95433 13.904 8.963 13.662C9.971 13.4207 10.9833 13.3 12 13.3C13.0167 13.3 14.0293 13.4207 15.038 13.662C16.046 13.904 17.0417 14.2667 18.025 14.75C18.475 14.9833 18.8333 15.3083 19.1 15.725C19.3667 16.1417 19.5 16.5917 19.5 17.075V19.3H4.5ZM6 17.8H18V17.075C18 16.875 17.9417 16.6917 17.825 16.525C17.7083 16.3583 17.55 16.2167 17.35 16.1C16.4833 15.6833 15.6043 15.3623 14.713 15.137C13.821 14.9123 12.9167 14.8 12 14.8C11.0833 14.8 10.179 14.9123 9.287 15.137C8.39567 15.3623 7.51667 15.6833 6.65 16.1C6.45 16.2167 6.29167 16.3583 6.175 16.525C6.05833 16.6917 6 16.875 6 17.075V17.8ZM12 10.2C12.55 10.2 13.021 10.004 13.413 9.612C13.8043 9.22066 14 8.75 14 8.2C14 7.65 13.8043 7.179 13.413 6.787C13.021 6.39566 12.55 6.2 12 6.2C11.45 6.2 10.9793 6.39566 10.588 6.787C10.196 7.179 10 7.65 10 8.2C10 8.75 10.196 9.22066 10.588 9.612C10.9793 10.004 11.45 10.2 12 10.2Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "play_arrow-filled" %}
-    <i class="ds-icon ds-icon--play_arrow-filled">
+  {%- if iconName == "play_arrow-filled" %}
+    <i class="ds-icon ds-icon--play_arrow-filled {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.42163 17.6869V5.48694L17.9966 11.5869L8.42163 17.6869Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "play_arrow" %}
-    <i class="ds-icon ds-icon--play_arrow">
+  {%- if iconName == "play_arrow" %}
+    <i class="ds-icon ds-icon--play_arrow {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 18.1V5.89999L18.075 12L8.5 18.1ZM10 15.35L15.275 12L10 8.64999V15.35Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "print" %}
-    <i class="ds-icon ds-icon--print">
+  {%- if iconName == "print" %}
+    <i class="ds-icon ds-icon--print {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 8.3V5.3H8.00005V8.3H6.50005V3.8H17.5V8.3H16ZM17.8 12.3C18.0834 12.3 18.321 12.204 18.513 12.012C18.7044 11.8207 18.8 11.5833 18.8 11.3C18.8 11.0167 18.7044 10.779 18.513 10.587C18.321 10.3957 18.0834 10.3 17.8 10.3C17.5167 10.3 17.279 10.3957 17.087 10.587C16.8957 10.779 16.8 11.0167 16.8 11.3C16.8 11.5833 16.8957 11.8207 17.087 12.012C17.279 12.204 17.5167 12.3 17.8 12.3ZM16 19V14.725H8.00005V19H16ZM17.5 20.5H6.50005V16.5H2.80005V10.8C2.80005 10.1 3.04172 9.50833 3.52505 9.025C4.00838 8.54167 4.60005 8.3 5.30005 8.3H18.7C19.4167 8.3 20.0127 8.54167 20.4881 9.025C20.9627 9.50833 21.2001 10.1 21.2001 10.8V16.5H17.5V20.5ZM19.7001 15V10.8C19.7001 10.5167 19.6044 10.279 19.413 10.087C19.2211 9.89567 18.9834 9.8 18.7 9.8H5.30005C5.01672 9.8 4.77938 9.89567 4.58805 10.087C4.39605 10.279 4.30005 10.5167 4.30005 10.8V15H6.50005V13.225H17.5V15H19.7001Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "priority_high" %}
-    <i class="ds-icon ds-icon--priority_high">
+  {%- if iconName == "priority_high" %}
+    <i class="ds-icon ds-icon--priority_high {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 19.925C11.5833 19.925 11.2293 19.7793 10.938 19.488C10.646 19.196 10.5 18.8417 10.5 18.425C10.5 18.0083 10.646 17.6543 10.938 17.363C11.2293 17.071 11.5833 16.925 12 16.925C12.4167 16.925 12.7707 17.071 13.062 17.363C13.354 17.6543 13.5 18.0083 13.5 18.425C13.5 18.8417 13.354 19.196 13.062 19.488C12.7707 19.7793 12.4167 19.925 12 19.925ZM10.625 15.025V3.57501H13.375V15.025H10.625Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "queue_music" %}
-    <i class="ds-icon ds-icon--queue_music">
+  {%- if iconName == "queue_music" %}
+    <i class="ds-icon ds-icon--queue_music {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 19.75C15.2333 19.75 14.5833 19.4833 14.05 18.95C13.5167 18.4167 13.25 17.7667 13.25 17C13.25 16.2333 13.5167 15.5833 14.05 15.05C14.5833 14.5167 15.2333 14.25 16 14.25C16.2167 14.25 16.429 14.279 16.637 14.337C16.8457 14.3957 17.05 14.5 17.25 14.65V6.25H21.75V8.025H18.75V17C18.75 17.7667 18.4833 18.4167 17.95 18.95C17.4167 19.4833 16.7667 19.75 16 19.75ZM3.25 15.75V14.25H10.75V15.75H3.25ZM3.25 11.75V10.25H14.75V11.75H3.25ZM3.25 7.75V6.25H14.75V7.75H3.25Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "radio_button_checked" %}
-    <i class="ds-icon ds-icon--radio_button_checked">
+  {%- if iconName == "radio_button_checked" %}
+    <i class="ds-icon ds-icon--radio_button_checked {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.5C13.25 16.5 14.3127 16.0627 15.188 15.188C16.0627 14.3127 16.5 13.25 16.5 12C16.5 10.75 16.0627 9.68733 15.188 8.812C14.3127 7.93733 13.25 7.5 12 7.5C10.75 7.5 9.68733 7.93733 8.812 8.812C7.93733 9.68733 7.5 10.75 7.5 12C7.5 13.25 7.93733 14.3127 8.812 15.188C9.68733 16.0627 10.75 16.5 12 16.5ZM12 21.5C10.6833 21.5 9.446 21.25 8.288 20.75C7.12933 20.25 6.125 19.575 5.275 18.725C4.425 17.875 3.75 16.8707 3.25 15.712C2.75 14.554 2.5 13.3167 2.5 12C2.5 10.6833 2.75 9.44567 3.25 8.287C3.75 7.129 4.425 6.125 5.275 5.275C6.125 4.425 7.12933 3.75 8.288 3.25C9.446 2.75 10.6833 2.5 12 2.5C13.3167 2.5 14.5543 2.75 15.713 3.25C16.871 3.75 17.875 4.425 18.725 5.275C19.575 6.125 20.25 7.129 20.75 8.287C21.25 9.44567 21.5 10.6833 21.5 12C21.5 13.3167 21.25 14.554 20.75 15.712C20.25 16.8707 19.575 17.875 18.725 18.725C17.875 19.575 16.871 20.25 15.713 20.75C14.5543 21.25 13.3167 21.5 12 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "radio_button_unchecked" %}
-    <i class="ds-icon ds-icon--radio_button_unchecked">
+  {%- if iconName == "radio_button_unchecked" %}
+    <i class="ds-icon ds-icon--radio_button_unchecked {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.5C10.6833 21.5 9.446 21.25 8.288 20.75C7.12933 20.25 6.125 19.575 5.275 18.725C4.425 17.875 3.75 16.8707 3.25 15.712C2.75 14.554 2.5 13.3167 2.5 12C2.5 10.6833 2.75 9.44567 3.25 8.287C3.75 7.129 4.425 6.125 5.275 5.275C6.125 4.425 7.12933 3.75 8.288 3.25C9.446 2.75 10.6833 2.5 12 2.5C13.3167 2.5 14.5543 2.75 15.713 3.25C16.871 3.75 17.875 4.425 18.725 5.275C19.575 6.125 20.25 7.129 20.75 8.287C21.25 9.44567 21.5 10.6833 21.5 12C21.5 13.3167 21.25 14.554 20.75 15.712C20.25 16.8707 19.575 17.875 18.725 18.725C17.875 19.575 16.871 20.25 15.713 20.75C14.5543 21.25 13.3167 21.5 12 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "redeem" %}
-    <i class="ds-icon ds-icon--redeem">
+  {%- if iconName == "redeem" %}
+    <i class="ds-icon ds-icon--redeem {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.25903 17.0931V19.2931H20.259V17.0931H4.25903ZM2.75903 20.7931V6.81813H7.33403C7.2507 6.66813 7.18837 6.50979 7.14703 6.34313C7.10503 6.17646 7.08403 6.00146 7.08403 5.81813C7.08403 5.11813 7.3257 4.52646 7.80903 4.04313C8.29237 3.55979 8.88403 3.31813 9.58403 3.31813C10.0007 3.31813 10.3884 3.42646 10.747 3.64313C11.105 3.85979 11.4174 4.12646 11.684 4.44313L12.234 5.19313L12.809 4.44313C13.059 4.10979 13.3634 3.83879 13.722 3.63013C14.08 3.42213 14.4674 3.31813 14.884 3.31813C15.584 3.31813 16.1757 3.55979 16.659 4.04313C17.1424 4.52646 17.384 5.11813 17.384 5.81813C17.384 6.00146 17.3674 6.17646 17.334 6.34313C17.3007 6.50979 17.234 6.66813 17.134 6.81813H21.759V20.7931H2.75903ZM4.25903 14.4931H20.259V8.31813H14.484L16.534 11.0931L15.334 11.9681L12.234 7.76813L9.15903 11.9681L7.95903 11.0931L9.95903 8.31813H4.25903V14.4931ZM9.58403 6.81813C9.86737 6.81813 10.105 6.72213 10.297 6.53013C10.4884 6.33879 10.584 6.10146 10.584 5.81813C10.584 5.53479 10.4884 5.29713 10.297 5.10513C10.105 4.91379 9.86737 4.81813 9.58403 4.81813C9.3007 4.81813 9.06337 4.91379 8.87203 5.10513C8.68003 5.29713 8.58403 5.53479 8.58403 5.81813C8.58403 6.10146 8.68003 6.33879 8.87203 6.53013C9.06337 6.72213 9.3007 6.81813 9.58403 6.81813ZM14.884 6.81813C15.1674 6.81813 15.405 6.72213 15.597 6.53013C15.7884 6.33879 15.884 6.10146 15.884 5.81813C15.884 5.53479 15.7884 5.29713 15.597 5.10513C15.405 4.91379 15.1674 4.81813 14.884 4.81813C14.6007 4.81813 14.3634 4.91379 14.172 5.10513C13.98 5.29713 13.884 5.53479 13.884 5.81813C13.884 6.10146 13.98 6.33879 14.172 6.53013C14.3634 6.72213 14.6007 6.81813 14.884 6.81813Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "search_off" %}
-    <i class="ds-icon ds-icon--search_off">
+  {%- if iconName == "search_off" %}
+    <i class="ds-icon ds-icon--search_off {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 21.3C5.75 21.3 4.68733 20.8627 3.812 19.988C2.93733 19.1127 2.5 18.05 2.5 16.8C2.5 15.55 2.93733 14.4873 3.812 13.612C4.68733 12.7373 5.75 12.3 7 12.3C8.25 12.3 9.31267 12.7373 10.188 13.612C11.0627 14.4873 11.5 15.55 11.5 16.8C11.5 18.05 11.0627 19.1127 10.188 19.988C9.31267 20.8627 8.25 21.3 7 21.3ZM20.525 20.575L14.175 14.225C14.0917 14.3083 13.9877 14.3833 13.863 14.45C13.7377 14.5167 13.6167 14.575 13.5 14.625C13.3667 14.4417 13.225 14.2583 13.075 14.075C12.925 13.8917 12.7667 13.725 12.6 13.575C13.35 13.2083 13.9583 12.6667 14.425 11.95C14.8917 11.2333 15.125 10.4167 15.125 9.5C15.125 8.21667 14.675 7.125 13.775 6.225C12.875 5.325 11.7833 4.875 10.5 4.875C9.21667 4.875 8.125 5.325 7.225 6.225C6.325 7.125 5.875 8.21667 5.875 9.5C5.875 9.65 5.88733 9.8 5.912 9.95C5.93733 10.1 5.96667 10.25 6 10.4C5.76667 10.4167 5.51667 10.4623 5.25 10.537C4.98333 10.6123 4.74167 10.7 4.525 10.8C4.49167 10.6 4.45833 10.3917 4.425 10.175C4.39167 9.95833 4.375 9.73333 4.375 9.5C4.375 7.8 4.97067 6.354 6.162 5.162C7.354 3.97067 8.8 3.375 10.5 3.375C12.2 3.375 13.646 3.97067 14.838 5.162C16.0293 6.354 16.625 7.8 16.625 9.5C16.625 10.2167 16.504 10.8957 16.262 11.537C16.0207 12.179 15.7 12.75 15.3 13.25L21.575 19.525L20.525 20.575ZM5.225 19.2L7 17.425L8.75 19.2L9.4 18.575L7.625 16.8L9.4 15.05L8.775 14.425L7 16.175L5.225 14.425L4.6 15.05L6.375 16.8L4.6 18.575L5.225 19.2Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "search" %}
-    <i class="ds-icon ds-icon--search">
+  {%- if iconName == "search" %}
+    <i class="ds-icon ds-icon--search {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.7298 20.3469L13.4298 14.0719C12.9298 14.4885 12.3548 14.8135 11.7048 15.0469C11.0548 15.2802 10.3881 15.3969 9.70477 15.3969C7.98811 15.3969 6.53811 14.8052 5.35477 13.6219C4.17144 12.4385 3.57977 10.9885 3.57977 9.27188C3.57977 7.57188 4.17144 6.12588 5.35477 4.93388C6.53811 3.74255 7.98811 3.14688 9.70477 3.14688C11.4048 3.14688 12.8464 3.73855 14.0298 4.92188C15.2131 6.10521 15.8048 7.55521 15.8048 9.27188C15.8048 9.98855 15.6881 10.6719 15.4548 11.3219C15.2214 11.9719 14.9048 12.5385 14.5048 13.0219L20.7798 19.2969L19.7298 20.3469ZM9.70477 13.8969C10.9881 13.8969 12.0758 13.4469 12.9678 12.5469C13.8591 11.6469 14.3048 10.5552 14.3048 9.27188C14.3048 7.98855 13.8591 6.89688 12.9678 5.99688C12.0758 5.09688 10.9881 4.64688 9.70477 4.64688C8.40477 4.64688 7.30911 5.09688 6.41777 5.99688C5.52577 6.89688 5.07977 7.98855 5.07977 9.27188C5.07977 10.5552 5.52577 11.6469 6.41777 12.5469C7.30911 13.4469 8.40477 13.8969 9.70477 13.8969Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "share" %}
-    <i class="ds-icon ds-icon--share">
+  {%- if iconName == "share" %}
+    <i class="ds-icon ds-icon--share {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 21.75C17.2333 21.75 16.5833 21.4833 16.05 20.95C15.5167 20.4167 15.25 19.7667 15.25 19C15.25 18.8833 15.2583 18.754 15.275 18.612C15.2917 18.4707 15.325 18.35 15.375 18.25L7.975 13.9C7.70833 14.1667 7.40833 14.375 7.075 14.525C6.74167 14.675 6.38333 14.75 6 14.75C5.23333 14.75 4.58333 14.4833 4.05 13.95C3.51667 13.4167 3.25 12.7667 3.25 12C3.25 11.2333 3.51667 10.5833 4.05 10.05C4.58333 9.51667 5.23333 9.25 6 9.25C6.38333 9.25 6.74167 9.325 7.075 9.475C7.40833 9.625 7.70833 9.83333 7.975 10.1L15.375 5.75C15.325 5.65 15.2917 5.529 15.275 5.387C15.2583 5.24567 15.25 5.11667 15.25 5C15.25 4.23333 15.5167 3.58333 16.05 3.05C16.5833 2.51667 17.2333 2.25 18 2.25C18.7667 2.25 19.4167 2.51667 19.95 3.05C20.4833 3.58333 20.75 4.23333 20.75 5C20.75 5.76667 20.4833 6.41667 19.95 6.95C19.4167 7.48333 18.7667 7.75 18 7.75C17.6167 7.75 17.2583 7.675 16.925 7.525C16.5917 7.375 16.2917 7.16667 16.025 6.9L8.625 11.25C8.675 11.35 8.70833 11.4667 8.725 11.6C8.74167 11.7333 8.75 11.8667 8.75 12C8.75 12.1167 8.74167 12.2457 8.725 12.387C8.70833 12.529 8.675 12.65 8.625 12.75L16.025 17.1C16.2917 16.8333 16.5917 16.625 16.925 16.475C17.2583 16.325 17.6167 16.25 18 16.25C18.7667 16.25 19.4167 16.5167 19.95 17.05C20.4833 17.5833 20.75 18.2333 20.75 19C20.75 19.7667 20.4833 20.4167 19.95 20.95C19.4167 21.4833 18.7667 21.75 18 21.75ZM18 6.25C18.35 6.25 18.646 6.129 18.888 5.887C19.1293 5.64567 19.25 5.35 19.25 5C19.25 4.65 19.1293 4.354 18.888 4.112C18.646 3.87067 18.35 3.75 18 3.75C17.65 3.75 17.3543 3.87067 17.113 4.112C16.871 4.354 16.75 4.65 16.75 5C16.75 5.35 16.871 5.64567 17.113 5.887C17.3543 6.129 17.65 6.25 18 6.25ZM6 13.25C6.35 13.25 6.646 13.129 6.888 12.887C7.12933 12.6457 7.25 12.35 7.25 12C7.25 11.65 7.12933 11.3543 6.888 11.113C6.646 10.871 6.35 10.75 6 10.75C5.65 10.75 5.35433 10.871 5.113 11.113C4.871 11.3543 4.75 11.65 4.75 12C4.75 12.35 4.871 12.6457 5.113 12.887C5.35433 13.129 5.65 13.25 6 13.25ZM18 20.25C18.35 20.25 18.646 20.129 18.888 19.887C19.1293 19.6457 19.25 19.35 19.25 19C19.25 18.65 19.1293 18.3543 18.888 18.113C18.646 17.871 18.35 17.75 18 17.75C17.65 17.75 17.3543 17.871 17.113 18.113C16.871 18.3543 16.75 18.65 16.75 19C16.75 19.35 16.871 19.6457 17.113 19.887C17.3543 20.129 17.65 20.25 18 20.25Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "support_agent" %}
-    <i class="ds-icon ds-icon--support_agent">
+  {%- if iconName == "support_agent" %}
+    <i class="ds-icon ds-icon--support_agent {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.9573 21.0939V19.5939H18.5823V12.0689C18.5823 11.1022 18.3989 10.1939 18.0323 9.3439C17.6656 8.4939 17.1656 7.75223 16.5323 7.1189C15.8989 6.48556 15.1573 5.98556 14.3073 5.6189C13.4573 5.25223 12.5489 5.0689 11.5823 5.0689C10.6156 5.0689 9.70727 5.25223 8.85728 5.6189C8.00728 5.98556 7.26561 6.48556 6.63228 7.1189C5.99894 7.75223 5.49894 8.4939 5.13228 9.3439C4.76561 10.1939 4.58228 11.1022 4.58228 12.0689V17.9939H2.08228V12.7689H3.08228L3.13228 11.4939C3.21561 10.3439 3.50328 9.28556 3.99528 8.3189C4.48661 7.35223 5.11561 6.5229 5.88228 5.8309C6.64894 5.13956 7.51961 4.60223 8.49428 4.2189C9.46961 3.83556 10.4989 3.6439 11.5823 3.6439C12.6656 3.6439 13.6989 3.83556 14.6823 4.2189C15.6656 4.60223 16.5363 5.13956 17.2943 5.8309C18.0529 6.5229 18.6783 7.3479 19.1703 8.3059C19.6616 9.26456 19.9489 10.3189 20.0323 11.4689L20.0823 12.7689H21.0823V17.9939H20.0823V21.0939H10.9573ZM8.78228 14.1689C8.53228 14.1689 8.31961 14.0812 8.14428 13.9059C7.96961 13.7312 7.88228 13.5272 7.88228 13.2939C7.88228 13.0439 7.96961 12.8312 8.14428 12.6559C8.31961 12.4812 8.53228 12.3939 8.78228 12.3939C9.01561 12.3939 9.21961 12.4812 9.39428 12.6559C9.56961 12.8312 9.65728 13.0439 9.65728 13.2939C9.65728 13.5272 9.56961 13.7312 9.39428 13.9059C9.21961 14.0812 9.01561 14.1689 8.78228 14.1689ZM14.3823 14.1689C14.1489 14.1689 13.9449 14.0812 13.7703 13.9059C13.5949 13.7312 13.5073 13.5272 13.5073 13.2939C13.5073 13.0439 13.5949 12.8312 13.7703 12.6559C13.9449 12.4812 14.1489 12.3939 14.3823 12.3939C14.6323 12.3939 14.8449 12.4812 15.0203 12.6559C15.1949 12.8312 15.2823 13.0439 15.2823 13.2939C15.2823 13.5272 15.1949 13.7312 15.0203 13.9059C14.8449 14.0812 14.6323 14.1689 14.3823 14.1689ZM5.95728 12.5439C5.89061 11.6272 6.01994 10.7899 6.34528 10.0319C6.66994 9.27323 7.10294 8.63123 7.64428 8.1059C8.18628 7.58123 8.80728 7.17723 9.50728 6.8939C10.2073 6.61056 10.9156 6.4689 11.6323 6.4689C13.0656 6.4689 14.3029 6.9189 15.3443 7.8189C16.3863 8.7189 17.0156 9.8439 17.2323 11.1939C15.7656 11.1939 14.4323 10.8022 13.2323 10.0189C12.0323 9.23556 11.1323 8.22723 10.5323 6.9939C10.2823 8.26056 9.74894 9.38556 8.93228 10.3689C8.11561 11.3522 7.12394 12.0772 5.95728 12.5439Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "twitter" %}
-    <i class="ds-icon ds-icon--twitter">
+  {%- if iconName == "twitter" %}
+    <i class="ds-icon ds-icon--twitter {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 3.99899C21.22 4.46199 19.655 5.09299 18.735 5.27499C18.708 5.28199 18.686 5.29099 18.66 5.29799C17.847 4.49599 16.733 3.99899 15.5 3.99899C13.015 3.99899 11 6.01399 11 8.49899C11 8.62999 10.989 8.87099 11 8.99899C7.647 8.99899 5.095 7.24299 3.265 4.99899C3.066 5.49899 2.979 6.28899 2.979 7.03099C2.979 8.43199 4.074 9.80799 5.779 10.661C5.465 10.742 5.119 10.8 4.759 10.8C4.178 10.8 3.563 10.647 3 10.183C3 10.2 3 10.216 3 10.234C3 12.192 5.078 13.525 6.926 13.896C6.551 14.117 5.795 14.139 5.426 14.139C5.166 14.139 4.246 14.02 4 13.974C4.514 15.579 6.368 16.481 8.135 16.513C6.753 17.597 5.794 17.999 2.964 17.999H2C3.788 19.145 6.065 20 8.347 20C15.777 20 20 14.337 20 8.99899C20 8.91299 19.998 8.73299 19.995 8.55199C19.995 8.53399 20 8.51699 20 8.49899C20 8.47199 19.992 8.44599 19.992 8.41899C19.989 8.28299 19.986 8.15599 19.983 8.08999C20.773 7.51999 21.458 6.80899 22 5.99899C21.275 6.32099 20.497 6.53699 19.68 6.63499C20.514 6.13499 21.699 4.94299 22 3.99899Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "user_policy" %}
-    <i class="ds-icon ds-icon--user_policy">
+  {%- if iconName == "user_policy" %}
+    <i class="ds-icon ds-icon--user_policy {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 13.5H18V12.3H14V13.5ZM14 16.2H18V15H14V16.2ZM14.5 7.5H21.5V21.5H2.5V7.5H9.5V2.5H14.5V7.5ZM11 9H13V4H11V9ZM9 15C9.36667 15 9.68333 14.871 9.95 14.613C10.2167 14.3543 10.35 14.0333 10.35 13.65C10.35 13.2833 10.2167 12.9667 9.95 12.7C9.68333 12.4333 9.36667 12.3 9 12.3C8.63333 12.3 8.31667 12.4333 8.05 12.7C7.78333 12.9667 7.65 13.2833 7.65 13.65C7.65 14.0167 7.78333 14.3333 8.05 14.6C8.31667 14.8667 8.63333 15 9 15ZM6.15 17.7H11.85V17.425C11.85 17.1583 11.7793 16.9167 11.638 16.7C11.496 16.4833 11.3 16.3167 11.05 16.2C10.7167 16.05 10.3833 15.9417 10.05 15.875C9.71667 15.8083 9.36667 15.775 9 15.775C8.63333 15.775 8.28333 15.8083 7.95 15.875C7.61667 15.9417 7.28333 16.05 6.95 16.2C6.7 16.3167 6.50433 16.4833 6.363 16.7C6.221 16.9167 6.15 17.1583 6.15 17.425V17.7ZM9.5 9H4V20H20V9H14.5V10.5H9.5V9Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "view_list" %}
-    <i class="ds-icon ds-icon--view_list">
+  {%- if iconName == "view_list" %}
+    <i class="ds-icon ds-icon--view_list {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 18.3V5.55H20.5V18.3H3.5ZM5 9.3H7.25V7.05H5V9.3ZM8.75 9.3H19V7.05H8.75V9.3ZM8.75 13.05H19V10.8H8.75V13.05ZM8.75 16.8H19V14.55H8.75V16.8ZM5 16.8H7.25V14.55H5V16.8ZM5 13.05H7.25V10.8H5V13.05Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "visibility_off" %}
-    <i class="ds-icon ds-icon--visibility_off">
+  {%- if iconName == "vip" %}
+    <i class="ds-icon ds-icon--vip {{ params.classNames }}" {{- attributes | safe }}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.47119 19.3077V17.0846C2.47119 16.5538 2.60485 16.0901 2.87217 15.6933C3.13947 15.2965 3.49427 14.9859 3.93659 14.7616C4.78659 14.3282 5.68402 13.9776 6.62887 13.7096C7.57373 13.4417 8.68783 13.3077 9.97117 13.3077C10.4712 13.3077 10.9362 13.3279 11.3664 13.3683C11.7965 13.4087 12.1981 13.4693 12.5711 13.55L11.2443 14.8769C11.0609 14.8436 10.8625 14.8237 10.6491 14.8173C10.4356 14.8109 10.2096 14.8077 9.97117 14.8077C8.78783 14.8077 7.75097 14.9397 6.86059 15.2038C5.97021 15.4679 5.22502 15.7666 4.62502 16.1C4.3981 16.2218 4.23239 16.3641 4.12789 16.5269C4.02341 16.6897 3.97117 16.8756 3.97117 17.0846V17.8077H10.0288L11.5288 19.3077H2.47119ZM15.425 20.0538L12.3212 16.95L13.375 15.8962L15.425 17.9462L20.475 12.8962L21.5288 13.95L15.425 20.0538ZM9.97117 11.6923C9.00868 11.6923 8.18473 11.3496 7.49932 10.6642C6.81392 9.97876 6.47122 9.15481 6.47122 8.19233C6.47122 7.22983 6.81392 6.40588 7.49932 5.72048C8.18473 5.03506 9.00868 4.69235 9.97117 4.69235C10.9337 4.69235 11.7576 5.03506 12.443 5.72048C13.1284 6.40588 13.4711 7.22983 13.4711 8.19233C13.4711 9.15481 13.1284 9.97876 12.443 10.6642C11.7576 11.3496 10.9337 11.6923 9.97117 11.6923ZM9.97117 10.1923C10.5212 10.1923 10.992 9.99649 11.3837 9.60483C11.7753 9.21316 11.9712 8.74233 11.9712 8.19233C11.9712 7.64233 11.7753 7.17149 11.3837 6.77983C10.992 6.38816 10.5212 6.19233 9.97117 6.19233C9.42117 6.19233 8.95033 6.38816 8.55867 6.77983C8.167 7.17149 7.97117 7.64233 7.97117 8.19233C7.97117 8.74233 8.167 9.21316 8.55867 9.60483C8.95033 9.99649 9.42117 10.1923 9.97117 10.1923Z"/></svg>
+    </i>
+  {% endif %}
+  {%- if iconName == "visibility_off" %}
+    <i class="ds-icon ds-icon--visibility_off {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.0874 13.1583L14.9624 12.0333C15.1124 11.2 14.8751 10.4543 14.2504 9.79634C13.6251 9.13767 12.8624 8.88334 11.9624 9.03334L10.8374 7.90834C11.0708 7.80834 11.3041 7.73334 11.5374 7.68334C11.7708 7.63334 12.0291 7.60834 12.3124 7.60834C13.4458 7.60834 14.4081 8.00434 15.1994 8.79634C15.9914 9.58767 16.3874 10.55 16.3874 11.6833C16.3874 11.9667 16.3624 12.229 16.3124 12.4703C16.2624 12.7123 16.1874 12.9417 16.0874 13.1583ZM19.2624 16.2583L18.1624 15.2333C18.7958 14.75 19.3584 14.2207 19.8504 13.6453C20.3418 13.0707 20.7624 12.4167 21.1124 11.6833C20.2791 10 19.0831 8.66234 17.5244 7.67034C15.9664 6.679 14.2291 6.18334 12.3124 6.18334C11.8291 6.18334 11.3541 6.21667 10.8874 6.28334C10.4208 6.35 9.96243 6.45 9.51243 6.58334L8.33743 5.40834C8.97076 5.15834 9.61676 4.975 10.2754 4.85834C10.9334 4.74167 11.6124 4.68334 12.3124 4.68334C14.6624 4.68334 16.7791 5.32934 18.6624 6.62134C20.5458 7.91267 21.9124 9.6 22.7624 11.6833C22.3958 12.5833 21.9208 13.4207 21.3374 14.1953C20.7541 14.9707 20.0624 15.6583 19.2624 16.2583ZM20.0624 22.0583L16.0374 18.0333C15.5208 18.2333 14.9501 18.3917 14.3254 18.5083C13.7001 18.625 13.0291 18.6833 12.3124 18.6833C9.96243 18.6833 7.84976 18.0373 5.97443 16.7453C4.09976 15.454 2.72909 13.7667 1.86243 11.6833C2.22909 10.8 2.70409 9.975 3.28743 9.20834C3.87076 8.44167 4.51243 7.78334 5.21243 7.23334L2.43743 4.43334L3.48743 3.35834L21.1374 21.0083L20.0624 22.0583ZM6.26243 8.28334C5.72909 8.7 5.21676 9.20434 4.72543 9.79634C4.23343 10.3877 3.82909 11.0167 3.51243 11.6833C4.34576 13.3667 5.54143 14.704 7.09943 15.6953C8.65809 16.6873 10.3958 17.1833 12.3124 17.1833C12.7624 17.1833 13.2124 17.1457 13.6624 17.0703C14.1124 16.9957 14.4958 16.9167 14.8124 16.8333L13.5624 15.5333C13.3791 15.6 13.1791 15.654 12.9624 15.6953C12.7458 15.7373 12.5291 15.7583 12.3124 15.7583C11.1791 15.7583 10.2168 15.3623 9.42543 14.5703C8.63343 13.779 8.23743 12.8167 8.23743 11.6833C8.23743 11.4833 8.25843 11.2707 8.30043 11.0453C8.34176 10.8207 8.39576 10.6167 8.46243 10.4333L6.26243 8.28334Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "visibility" %}
-    <i class="ds-icon ds-icon--visibility">
+  {%- if iconName == "visibility" %}
+    <i class="ds-icon ds-icon--visibility {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 15.575C13.1333 15.575 14.0957 15.179 14.887 14.387C15.679 13.5957 16.075 12.6333 16.075 11.5C16.075 10.3667 15.679 9.40433 14.887 8.613C14.0957 7.821 13.1333 7.425 12 7.425C10.8667 7.425 9.90432 7.821 9.11299 8.613C8.32099 9.40433 7.92499 10.3667 7.92499 11.5C7.92499 12.6333 8.32099 13.5957 9.11299 14.387C9.90432 15.179 10.8667 15.575 12 15.575ZM12 14.2C11.25 14.2 10.6127 13.9373 10.088 13.412C9.56265 12.8873 9.29999 12.25 9.29999 11.5C9.29999 10.75 9.56265 10.1123 10.088 9.587C10.6127 9.06233 11.25 8.8 12 8.8C12.75 8.8 13.3877 9.06233 13.913 9.587C14.4377 10.1123 14.7 10.75 14.7 11.5C14.7 12.25 14.4377 12.8873 13.913 13.412C13.3877 13.9373 12.75 14.2 12 14.2ZM12 18.5C9.69999 18.5 7.60432 17.8667 5.71299 16.6C3.82099 15.3333 2.43332 13.6333 1.54999 11.5C2.43332 9.36667 3.82099 7.66667 5.71299 6.4C7.60432 5.13333 9.69999 4.5 12 4.5C14.3 4.5 16.396 5.13333 18.288 6.4C20.1793 7.66667 21.5667 9.36667 22.45 11.5C21.5667 13.6333 20.1793 15.3333 18.288 16.6C16.396 17.8667 14.3 18.5 12 18.5ZM12 17C13.8833 17 15.6127 16.504 17.188 15.512C18.7627 14.5207 19.9667 13.1833 20.8 11.5C19.9667 9.81667 18.7627 8.479 17.188 7.487C15.6127 6.49567 13.8833 6 12 6C10.1167 6 8.38732 6.49567 6.81199 7.487C5.23732 8.479 4.03332 9.81667 3.19999 11.5C4.03332 13.1833 5.23732 14.5207 6.81199 15.512C8.38732 16.504 10.1167 17 12 17Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "volume_off" %}
-    <i class="ds-icon ds-icon--volume_off">
+  {%- if iconName == "volume_off" %}
+    <i class="ds-icon ds-icon--volume_off {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.475 22.15L16.45 19.125C16.1167 19.3417 15.7583 19.5333 15.375 19.7C14.9917 19.8667 14.5917 20 14.175 20.1V18.55C14.3917 18.4833 14.6 18.4083 14.8 18.325C15 18.2417 15.1917 18.15 15.375 18.05L11.8 14.45V18.8L7.5 14.5H3.8V9.5H6.825L2 4.65L3.05 3.6L20.525 21.075L19.475 22.15ZM18.975 16.725L17.9 15.65C18.25 15.1167 18.5167 14.5373 18.7 13.912C18.8833 13.2873 18.975 12.6417 18.975 11.975C18.975 10.4583 18.5333 9.09567 17.65 7.887C16.7667 6.679 15.6083 5.85 14.175 5.4V3.85C16.0417 4.35 17.5583 5.35 18.725 6.85C19.8917 8.35 20.475 10.0583 20.475 11.975C20.475 12.8583 20.346 13.7 20.088 14.5C19.8293 15.3 19.4583 16.0417 18.975 16.725ZM15.925 13.675L14.175 11.925V8.3C14.8417 8.66667 15.3627 9.18333 15.738 9.85C16.1127 10.5167 16.3 11.2333 16.3 12C16.3 12.3 16.2667 12.5873 16.2 12.862C16.1333 13.1373 16.0417 13.4083 15.925 13.675ZM11.8 9.525L9.625 7.375L11.8 5.2V9.525ZM10.3 15.15V12.95L8.325 11H5.3V13H8.15L10.3 15.15Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "volume_up" %}
-    <i class="ds-icon ds-icon--volume_up">
+  {%- if iconName == "volume_up" %}
+    <i class="ds-icon ds-icon--volume_up {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 20.1V18.55C15.4834 18.1 16.6417 17.2707 17.525 16.062C18.4084 14.854 18.85 13.4917 18.85 11.975C18.85 10.4583 18.4084 9.09567 17.525 7.887C16.6417 6.679 15.4834 5.85 14.05 5.4V3.85C15.9 4.35 17.4124 5.35 18.587 6.85C19.7624 8.35 20.35 10.0583 20.35 11.975C20.35 13.8917 19.7624 15.6 18.587 17.1C17.4124 18.6 15.9 19.6 14.05 20.1ZM3.65002 14.5V9.5H7.37502L11.65 5.2V18.8L7.37502 14.5H3.65002ZM14.05 15.65V8.3C14.7167 8.66667 15.2334 9.18333 15.6 9.85C15.9667 10.5167 16.15 11.2333 16.15 12C16.15 12.7667 15.9667 13.475 15.6 14.125C15.2334 14.775 14.7167 15.2833 14.05 15.65ZM10.15 8.85L8.00002 11H5.15002V13H8.00002L10.15 15.15V8.85Z"/></svg>
     </i>
   {% endif %}
-  {% if iconName == "wifi_off" %}
-    <i class="ds-icon ds-icon--wifi_off">
+  {%- if iconName == "wifi_off" %}
+    <i class="ds-icon ds-icon--wifi_off {{ params.classNames }}" {{- attributes | safe }}>
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.9 11.1C20.6167 9.81667 19.1294 8.81233 17.438 8.087C15.746 7.36233 13.9334 7 12 7C11.65 7 11.3084 7.01233 10.975 7.037C10.6417 7.06233 10.3167 7.1 10 7.15L8.07505 5.225C8.67505 5.075 9.29605 4.96233 9.93805 4.887C10.5794 4.81233 11.2667 4.775 12 4.775C14.25 4.775 16.354 5.19567 18.312 6.037C20.2707 6.879 21.9834 8.03333 23.4501 9.5L21.9 11.1ZM17.9 15.05L13.9 11.05C14.8667 11.1833 15.8084 11.4793 16.725 11.938C17.6417 12.396 18.4667 13 19.2001 13.75L17.9 15.05ZM19.8251 21.975L10.975 13.1C10.075 13.2 9.22505 13.4457 8.42505 13.837C7.62505 14.229 6.93338 14.7333 6.35005 15.35L4.80005 13.75C5.38338 13.1667 6.04605 12.6583 6.78805 12.225C7.52938 11.7917 8.31671 11.4667 9.15005 11.25L6.17505 8.3C5.45838 8.61667 4.74605 9.01667 4.03805 9.5C3.32938 9.98333 2.68338 10.5167 2.10005 11.1L0.550049 9.5C1.15005 8.9 1.78772 8.35833 2.46305 7.875C3.13772 7.39167 3.82505 6.975 4.52505 6.625L2.32505 4.425L3.37505 3.375L20.925 20.925L19.8251 21.975ZM12 21L9.02505 18C9.40838 17.6167 9.85438 17.3167 10.363 17.1C10.871 16.8833 11.4167 16.775 12 16.775C12.5834 16.775 13.129 16.8833 13.637 17.1C14.1457 17.3167 14.5917 17.6167 14.975 18L12 21Z"/></svg>
     </i>
   {% endif %}