refactor icons in links and buttons

src/registrar/assets/js/get-gov.js

@@ -1910,7 +1910,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         let editableFormGroup = button.parentElement.parentElement.parentElement;
         if (editableFormGroup){
-          let readonlyField = editableFormGroup.querySelector(".input-with-edit-button__readonly-field")
+          let readonlyField = editableFormGroup.querySelector(".toggleable_input__readonly-field")
           let inputField = document.getElementById(`id_${fieldName}`);
           if (!inputField || !readonlyField) {
             return;
@@ -1936,8 +1936,8 @@ document.addEventListener('DOMContentLoaded', function() {
                       // Keep the path before '#' and replace the part after '#' with 'invalid'
                       const newHref = parts[0] + '#error';
                       svg.setAttribute('xlink:href', newHref);
-                      fullNameField.classList.add("input-with-edit-button__error")
+                      fullNameField.classList.add("toggleable_input__error")
-                      label = fullNameField.querySelector(".input-with-edit-button__readonly-field")
+                      label = fullNameField.querySelector(".toggleable_input__readonly-field")
                       label.innerHTML = "Unknown";
                     }
                   }

src/registrar/assets/sass/_theme/_base.scss

@@ -199,3 +199,7 @@ abbr[title] {
     max-width: 50ch;
   }
 }
+
+.margin-right-neg-4px {
+  margin-right: -4px;
+}

src/registrar/assets/sass/_theme/_buttons.scss

@@ -124,10 +124,6 @@ a.withdraw:active {
   background-color: color('error-darker');
 }
 
-.usa-button--unstyled .usa-icon {
-  vertical-align: bottom;
-}
-
 a.usa-button--unstyled:visited {
   color: color('primary');
 }
@@ -162,14 +158,14 @@ a.usa-button--unstyled:visited {
   }
 }
 
-.input-with-edit-button {
+.toggleable_input {
   svg.usa-icon {
     width: 1.5em !important;
     height: 1.5em !important;
     color: #{$dhs-green};
     position: absolute;
   }
-  &.input-with-edit-button__error {
+  &.toggleable_input__error {
     svg.usa-icon {
       color: #{$dhs-red};
     }
@@ -205,12 +201,36 @@ a.usa-button--unstyled:visited {
   }
 }
 
+.dotgov-table a,
+.usa-link--icon,
+.usa-button--with-icon {
+    display: flex;
+    align-items: flex-start;
+    color: color('primary');
+    column-gap: units(.5);
+    align-items: center;
+}
+
+
+.dotgov-table a,
+.usa-link--icon {
+    &:visited {
+        color: color('primary');   
+    }
+}
+
+a .usa-icon,
+.usa-button--with-icon .usa-icon {
+  height: 1.2em;
+  width: 1.2em;
+}
+
+a .usa-icon {
+  margin-top: -.1rem;
+}
+
 .usa-icon.usa-icon--big {
   margin: 0;
   height: 1.5em;
   width: 1.5em;
-}
-
-.margin-right-neg-4px {
-  margin-right: -4px;
 }

src/registrar/assets/sass/_theme/_links.scss

@@ -1,18 +1,4 @@
 @use "uswds-core" as *;
 
-.dotgov-table a,
-.usa-link--icon {
-    display: flex;
-    align-items: flex-start;
-    color: color('primary');
 
-    &:visited {
-        color: color('primary');   
-    }
-    .usa-icon {
-        // align icon with x height
-        margin-top: units(0.5);
-        margin-right: units(0.5);
-    }
-}
 

src/registrar/templates/domain_dsdata.html

@@ -63,10 +63,10 @@
 
       <div class="grid-row margin-top-1">
         <div class="grid-col">
-          <button type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record">
+          <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon float-right-tablet delete-record">
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
-            </svg><span class="margin-left-05">Delete</span>
+            </svg>Delete
           </button>
         </div>
       </div>
@@ -74,10 +74,10 @@
     </fieldset>
     {% endfor %}
 
-    <button type="button" class="usa-button usa-button--unstyled display-block margin-bottom-2" id="add-form">
+    <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon margin-bottom-2" id="add-form">
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
         <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
-      </svg><span class="margin-left-05">Add new record</span>
+      </svg>Add new record
     </button>
 
     <button

src/registrar/templates/domain_nameservers.html

@@ -52,20 +52,20 @@
           {% endwith %}
         </div>
         <div class="tablet:grid-col-2">
-          <button type="button" class="usa-button usa-button--unstyled display-block delete-record margin-bottom-075">
+          <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon delete-record margin-bottom-075">
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
-            </svg><span class="margin-left-05">Delete</span>
+            </svg>Delete
           </button>
         </div>
       </div>
     </div>
     {% endfor %}
 
-    <button type="button" class="usa-button usa-button--unstyled display-block" id="add-form">
+    <button type="button" class="usa-button usa-button--unstyled usa-button--with-icon" id="add-form">
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
         <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
-      </svg><span class="margin-left-05">Add another name server</span>
+      </svg>Add another name server
     </button>
 
     {% comment %} Work around USWDS' button margins to add some spacing between the submit and the 'add more'

src/registrar/templates/includes/toggleable_input.html

@@ -1,6 +1,6 @@
 {% load static field_helpers url_helpers custom_filters %}
 
-<div id="{{field.name}}__edit-button-readonly" class="margin-top-2 margin-bottom-1 input-with-edit-button {% if not field.value and field.field.required %}input-with-edit-button__error{% endif %}">
+<div id="{{field.name}}__edit-button-readonly" class="margin-top-2 margin-bottom-1 toggleable_input {% if not field.value and field.field.required %}toggleable_input__error{% endif %}">
     <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
         {% if field.value or not field.field.required %}
             <use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
@@ -8,7 +8,7 @@
             <use xlink:href="{%static 'img/sprite.svg'%}#error"></use>
         {%endif %}
     </svg>
-    <div class="display-inline padding-left-05 margin-left-3 input-with-edit-button__readonly-field {% if not field.field.required %}text-base{% endif %}">
+    <div class="display-inline padding-left-05 margin-left-3 toggleable_input__readonly-field {% if not field.field.required %}text-base{% endif %}">
         {% if field.name != "phone" %}
         {{ field.value }}
         {% else %}