Remove unnecessary attributes from icon.vue

- `cssClasses` is redundant because `class`
  values are merged with the root element anyway.
- `width`, `height`, `x`, `y` are redundant and
  will all pass through.
- `tabIndex` is redundant because `tabindex` can
  be passed through.

https://gitlab.com/gitlab-org/gitlab/merge_requests/17839

app/assets/javascripts/boards/components/issue_time_estimate.vue

@@ -34,7 +34,7 @@ export default {
 <template>
   <span>
     <span ref="issueTimeEstimate" class="board-card-info card-number">
-      <icon name="hourglass" css-classes="board-card-info-icon align-top" /><time
+      <icon name="hourglass" class="board-card-info-icon align-top" /><time
         class="board-card-info-text"
         >{{ timeEstimate }}</time
       >

app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue

@@ -34,7 +34,7 @@ export default {
         class="more-actions-toggle btn btn-transparent p-0"
         data-toggle="dropdown"
       >
-        <icon css-classes="icon" name="ellipsis_v" />
+        <icon class="icon" name="ellipsis_v" />
       </gl-button>
       <ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
         <slot name="dropdown-options"></slot>

app/assets/javascripts/error_tracking/components/error_tracking_list.vue

@@ -100,7 +100,7 @@ export default {
 
           <template slot="lastSeen" slot-scope="errors">
             <div class="d-flex align-items-center">
-              <icon name="calendar" css-classes="text-secondary mr-1" />
+              <icon name="calendar" class="text-secondary mr-1" />
               <time-ago :time="errors.item.lastSeen" class="text-secondary" />
             </div>
           </template>

app/assets/javascripts/groups/components/item_actions.vue

@@ -56,7 +56,7 @@ export default {
       class="leave-group btn btn-xs no-expand"
       @click.prevent="onLeaveGroup"
     >
-      <icon name="leave" css-classes="position-top-0" />
+      <icon name="leave" class="position-top-0" />
     </a>
     <a
       v-if="group.canEdit"
@@ -68,7 +68,7 @@ export default {
       data-placement="bottom"
       class="edit-group btn btn-xs no-expand"
     >
-      <icon name="settings" css-classes="position-top-0" />
+      <icon name="settings" class="position-top-0" />
     </a>
   </div>
 </template>

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

@@ -86,7 +86,7 @@ export default {
       data-placement="left"
       class="append-bottom-10"
     >
-      <icon :name="additionIconName" :size="18" :css-classes="addedFilesIconClass" />
+      <icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
     </div>
     {{ addedFilesLength }}
     <div
@@ -96,7 +96,7 @@ export default {
       data-placement="left"
       class="prepend-top-10 append-bottom-10"
     >
-      <icon :name="modifiedIconName" :size="18" :css-classes="modifiedFilesClass" />
+      <icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
     </div>
     {{ modifiedFilesLength }}
   </div>

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -114,7 +114,7 @@ export default {
       </span>
       <div class="ml-auto d-flex align-items-center">
         <div class="d-flex align-items-center ide-commit-list-changed-icon">
-          <icon :name="iconName" :size="16" :css-classes="iconClass" />
+          <icon :name="iconName" :size="16" :class="iconClass" />
         </div>
       </div>
     </div>

app/assets/javascripts/ide/components/external_link.vue

@@ -28,7 +28,7 @@ export default {
       rel="noopener noreferrer"
     >
       <span class="vertical-align-middle">{{ __('Open in file view') }}</span>
-      <icon :size="16" name="external-link" css-classes="vertical-align-middle space-right" />
+      <icon :size="16" name="external-link" class="vertical-align-middle space-right" />
     </a>
   </div>
 </template>

app/assets/javascripts/ide/components/file_row_extra.vue

@@ -79,7 +79,7 @@ export default {
         data-container="body"
         data-placement="right"
         name="file-modified"
-        css-classes="prepend-left-5 ide-file-modified"
+        class="prepend-left-5 ide-file-modified"
       />
     </span>
     <changed-file-icon

app/assets/javascripts/ide/components/jobs/stage.vue

@@ -77,7 +77,7 @@ export default {
       <div v-if="!stage.isLoading || stage.jobs.length" class="append-right-8 prepend-left-4">
         <span class="badge badge-pill"> {{ jobsCount }} </span>
       </div>
-      <icon :name="collapseIcon" css-classes="ide-stage-collapse-icon" />
+      <icon :name="collapseIcon" class="ide-stage-collapse-icon" />
     </div>
     <div v-show="!stage.isCollapsed" class="card-body">
       <gl-loading-icon v-if="showLoadingIcon" />

app/assets/javascripts/ide/components/mr_file_icon.vue

@@ -18,6 +18,6 @@ export default {
     :title="__('Part of merge request changes')"
     :size="12"
     name="git-merge"
-    css-classes="append-right-8"
+    class="append-right-8"
   />
 </template>

app/assets/javascripts/ide/components/new_dropdown/button.vue

@@ -52,7 +52,7 @@ export default {
     class="btn-blank"
     @click.stop.prevent="clicked"
   >
-    <icon :name="icon" :css-classes="iconClasses" />
+    <icon :name="icon" :class="iconClasses" />
     <template v-if="showLabel">
       {{ label }}
     </template>

app/assets/javascripts/ide/components/repo_file_status_icon.vue

@@ -29,6 +29,6 @@ export default {
 
 <template>
   <span v-if="file.file_lock" v-tooltip :title="lockTooltip" data-container="body">
-    <icon name="lock" css-classes="file-status-icon" />
+    <icon name="lock" class="file-status-icon" />
   </span>
 </template>

app/assets/javascripts/notes/components/note_actions.vue

@@ -149,9 +149,9 @@ export default {
         title="Add reaction"
         data-position="right"
       >
-        <icon css-classes="link-highlight award-control-icon-neutral" name="slight-smile" />
-        <icon css-classes="link-highlight award-control-icon-positive" name="smiley" />
-        <icon css-classes="link-highlight award-control-icon-super-positive" name="smiley" />
+        <icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
+        <icon class="link-highlight award-control-icon-positive" name="smiley" />
+        <icon class="link-highlight award-control-icon-super-positive" name="smiley" />
       </a>
     </div>
     <reply-button
@@ -168,7 +168,7 @@ export default {
         class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
         @click="onEdit"
       >
-        <icon name="pencil" css-classes="link-highlight" />
+        <icon name="pencil" class="link-highlight" />
       </button>
     </div>
     <div v-if="showDeleteAction" class="note-actions-item">
@@ -191,7 +191,7 @@ export default {
         data-toggle="dropdown"
         @click="closeTooltip"
       >
-        <icon css-classes="icon" name="ellipsis_v" />
+        <icon class="icon" name="ellipsis_v" />
       </button>
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <li v-if="canReportAsAbuse">

app/assets/javascripts/notes/components/note_actions/reply_button.vue

@@ -26,7 +26,7 @@ export default {
       :title="__('Reply to comment')"
       @click="$emit('startReplying')"
     >
-      <icon name="comment" css-classes="link-highlight" />
+      <icon name="comment" class="link-highlight" />
     </gl-button>
   </div>
 </template>

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -194,9 +194,9 @@ export default {
                 v-show="noEmoji"
                 class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
               >
-                <icon name="slight-smile" css-classes="award-control-icon-neutral" />
-                <icon name="smiley" css-classes="award-control-icon-positive" />
-                <icon name="smile" css-classes="award-control-icon-super-positive" />
+                <icon name="slight-smile" class="award-control-icon-neutral" />
+                <icon name="smiley" class="award-control-icon-positive" />
+                <icon name="smile" class="award-control-icon-super-positive" />
               </span>
             </button>
           </span>

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

@@ -82,11 +82,7 @@ export default {
     data-boundary="viewport"
     @click="handleButtonClick"
   >
-    <icon
-      v-show="collapsed"
-      :css-classes="collapsedButtonIconClasses"
-      :name="collapsedButtonIcon"
-    />
+    <icon v-show="collapsed" :class="collapsedButtonIconClasses" :name="collapsedButtonIcon" />
     <span v-show="!collapsed" class="issuable-todo-inner"> {{ buttonLabel }} </span>
     <gl-loading-icon v-show="isActionActive" :inline="true" />
   </button>

app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue

@@ -19,6 +19,6 @@ export default {
 </script>
 <template>
   <a :href="link" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass">
-    {{ __('View app') }} <icon css-classes="fgray" name="external-link" />
+    {{ __('View app') }} <icon class="fgray" name="external-link" />
   </a>
 </template>

app/assets/javascripts/vue_shared/components/changed_file_icon.vue

@@ -83,7 +83,7 @@ export default {
     :class="{ 'ml-auto': isCentered }"
     class="file-changed-icon d-inline-block"
   >
-    <icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" />
+    <icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
   </span>
 </template>
 

app/assets/javascripts/vue_shared/components/ci_icon.vue

@@ -66,5 +66,5 @@ export default {
 };
 </script>
 <template>
-  <span :class="cssClass"> <icon :name="icon" :size="size" :css-classes="cssClasses" /> </span>
+  <span :class="cssClass"> <icon :name="icon" :size="size" :class="cssClasses" /> </span>
 </template>

app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue

@@ -40,7 +40,7 @@ export default {
         </template>
       </p>
       <gl-link :href="path" class="btn btn-default" rel="nofollow" download target="_blank">
-        <icon :size="16" name="download" css-classes="float-left append-right-8" />
+        <icon :size="16" name="download" class="float-left append-right-8" />
         {{ __('Download') }}
       </gl-link>
     </div>

app/assets/javascripts/vue_shared/components/file_icon.vue

@@ -75,7 +75,7 @@ export default {
     <svg v-if="!loading && !folder" :class="[iconSizeClass, cssClasses]">
       <use v-bind="{ 'xlink:href': spriteHref }" />
     </svg>
-    <icon v-if="!loading && folder" :name="folderIconName" :size="size" css-classes="folder-icon" />
+    <icon v-if="!loading && folder" :name="folderIconName" :size="size" class="folder-icon" />
     <gl-loading-icon v-if="loading" :inline="true" />
   </span>
 </template>

app/assets/javascripts/vue_shared/components/icon.vue

@@ -27,7 +27,7 @@ if (process.env.NODE_ENV !== 'production') {
  *  <icon
  *    name="retry"
  *    :size="32"
- *    css-classes="top"
+ *    class="top"
  *  />
  */
 export default {
@@ -42,45 +42,7 @@ export default {
       type: Number,
       required: false,
       default: 16,
-      validator(value) {
-        return validSizes.includes(value);
-      },
-    },
-
-    cssClasses: {
-      type: String,
-      required: false,
-      default: '',
-    },
-
-    width: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    height: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    y: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    x: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    tabIndex: {
-      type: String,
-      required: false,
-      default: null,
+      validator: value => validSizes.includes(value),
     },
   },
 
@@ -99,15 +61,7 @@ export default {
 </script>
 
 <template>
-  <svg
-    :class="[iconSizeClass, iconTestClass, cssClasses]"
-    :width="width"
-    :height="height"
-    :x="x"
-    :y="y"
-    :tabindex="tabIndex"
-    aria-hidden="true"
-  >
+  <svg :class="[iconSizeClass, iconTestClass]" aria-hidden="true">
     <use v-bind="{ 'xlink:href': spriteHref }" />
   </svg>
 </template>

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

@@ -63,7 +63,7 @@ export default {
           <icon
             v-if="hasState"
             ref="iconElementXL"
-            :css-classes="iconClass"
+            :class="iconClass"
             :name="iconName"
             :size="16"
             :title="stateTitle"
@@ -100,7 +100,7 @@ export default {
             <span ref="iconElement">
               <icon
                 v-if="hasState"
-                :css-classes="iconClass"
+                :class="iconClass"
                 :name="iconName"
                 :title="stateTitle"
                 :aria-label="state"

app/assets/javascripts/vue_shared/components/toggle_button.vue

@@ -74,7 +74,7 @@ export default {
       @click="toggleFeature"
     >
       <gl-loading-icon class="loading-icon" />
-      <span class="toggle-icon"> <icon :name="toggleIcon" css-classes="toggle-icon-svg" /> </span>
+      <span class="toggle-icon"> <icon :name="toggleIcon" class="toggle-icon-svg" /> </span>
     </button>
   </label>
 </template>

app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue

@@ -71,15 +71,11 @@ export default {
         </div>
         <div class="text-secondary">
           <div v-if="user.bio" class="js-bio d-flex mb-1">
-            <icon name="profile" css-classes="category-icon flex-shrink-0" />
+            <icon name="profile" class="category-icon flex-shrink-0" />
             <span class="ml-1">{{ user.bio }}</span>
           </div>
           <div v-if="user.organization" class="js-organization d-flex mb-1">
-            <icon
-              v-show="!jobInfoIsLoading"
-              name="work"
-              css-classes="category-icon flex-shrink-0"
-            />
+            <icon v-show="!jobInfoIsLoading" name="work" class="category-icon flex-shrink-0" />
             <span class="ml-1">{{ user.organization }}</span>
           </div>
           <gl-skeleton-loading
@@ -92,7 +88,7 @@ export default {
           <icon
             v-show="!locationIsLoading && user.location"
             name="location"
-            css-classes="category-icon flex-shrink-0"
+            class="category-icon flex-shrink-0"
           />
           <span class="ml-1">{{ user.location }}</span>
           <gl-skeleton-loading

doc/development/fe_guide/icons.md

@@ -59,8 +59,8 @@ export default {
 <template>
   <icon
     name="issues"
-    :size="72"
-    css-classes="icon-danger"
+    :size="24"
+    class="icon-danger"
   />
 </template>
 ```

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_card_list_item.vue

@@ -40,7 +40,7 @@ export default {
         class="more-actions-toggle btn btn-transparent p-0"
         data-toggle="dropdown"
       >
-        <icon css-classes="icon" name="ellipsis_v" />
+        <icon class="icon" name="ellipsis_v" />
       </gl-button>
       <ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
         <slot name="dropdown-options"></slot>

ee/app/assets/javascripts/boards/components/issue_card_weight.vue

@@ -30,7 +30,7 @@ export default {
     tabindex="1"
     v-on="$listeners"
   >
-    <icon name="weight" css-classes="board-card-info-icon" />
+    <icon name="weight" class="board-card-info-icon" />
     <span class="board-card-info-text"> {{ weight }} </span>
     <gl-tooltip
       :target="() => $refs.itemWeight"

ee/app/assets/javascripts/design_management/components/list/item.vue

@@ -77,7 +77,7 @@ export default {
     <div class="card-body p-0 d-flex align-items-center overflow-hidden position-relative">
       <div v-if="icon.name" class="design-event position-absolute">
         <span :title="icon.tooltip" :aria-label="icon.tooltip">
-          <icon :name="icon.name" :size="18" :css-classes="icon.classes" />
+          <icon :name="icon.name" :size="18" :class="icon.classes" />
         </span>
       </div>
       <img :src="image" :alt="name" class="block ml-auto mr-auto mw-100 mh-100 design-img" />

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue

@@ -68,7 +68,7 @@ export default {
       v-gl-tooltip
       :title="$options.tooltips.information"
       name="information"
-      css-classes="dashboard-card-icon"
+      class="dashboard-card-icon"
     />
     <review-app-link
       v-else-if="environment.external_url"

ee/app/assets/javascripts/epic/components/epic_header.vue

@@ -82,7 +82,7 @@ export default {
         :class="{ 'status-box-open': isEpicOpen, 'status-box-issue-closed': !isEpicOpen }"
         class="issuable-status-box status-box"
       >
-        <icon :name="statusIcon" css-classes="d-block d-sm-none" />
+        <icon :name="statusIcon" class="d-block d-sm-none" />
         <span class="d-none d-sm-block">{{ statusText }}</span>
       </div>
       <div class="issuable-meta">

ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue

@@ -199,8 +199,8 @@ export default {
         <icon
           v-popover="popoverOptions"
           name="question-o"
-          css-classes="help-icon append-right-5"
-          tab-index="0"
+          class="help-icon append-right-5"
+          tabindex="0"
         />
         <gl-button
           v-show="canUpdate && !editing"
@@ -244,8 +244,8 @@ export default {
               v-if="isDateInvalid && selectedDateIsFixed"
               v-popover="dateInvalidPopoverOptions"
               name="warning"
-              css-classes="date-warning-icon append-right-5 prepend-left-5"
-              tab-index="0"
+              class="date-warning-icon append-right-5 prepend-left-5"
+              tabindex="0"
             />
             <span v-if="selectedAndEditable" class="no-value d-flex">
               &nbsp;&ndash;&nbsp;
@@ -282,8 +282,8 @@ export default {
           v-if="isDateInvalid && !selectedDateIsFixed"
           v-popover="dateInvalidPopoverOptions"
           name="warning"
-          css-classes="date-warning-icon prepend-left-5"
-          tab-index="0"
+          class="date-warning-icon prepend-left-5"
+          tabindex="0"
         />
       </abbr>
     </div>

ee/app/assets/javascripts/geo_nodes/components/geo_node_detail_item.vue

@@ -128,7 +128,7 @@ export default {
         v-if="hasHelpInfo"
         v-popover="popoverConfig"
         :size="12"
-        css-classes="node-detail-help-text prepend-left-5"
+        class="node-detail-help-text prepend-left-5"
         name="question"
       />
     </div>
@@ -148,7 +148,7 @@ export default {
         v-tooltip
         :title="itemValueStaleTooltip"
         name="time-out"
-        css-classes="prepend-left-10 detail-value-stale-icon"
+        class="prepend-left-10 detail-value-stale-icon"
         data-container="body"
       />
     </div>

ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue

@@ -81,7 +81,7 @@ export default {
             v-tooltip
             :name="nodeStatusIconName"
             :size="18"
-            :css-classes="nodeStatusIconClass"
+            :class="nodeStatusIconClass"
             :title="nodeStatusIconTooltip"
             data-container="body"
             data-placement="bottom"

ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_settings.vue

@@ -118,7 +118,7 @@ export default {
       data-placement="bottom"
     >
       <strong>{{ syncType }}</strong>
-      <icon name="retry" css-classes="sync-status-icon prepend-left-5" />
+      <icon name="retry" class="sync-status-icon prepend-left-5" />
       <span v-if="!eventTimestampEmpty" class="sync-status-event-info prepend-left-5">
         {{ syncStatusEventInfo }}
       </span>

ee/app/assets/javascripts/licenses/components/cells/info_cell.vue

@@ -44,7 +44,7 @@ export default {
       <span class="mr-2 text">{{ title }}</span>
 
       <button ref="popoverTarget" type="button" class="btn-link information-target">
-        <icon name="information" css-classes="icon d-block" />
+        <icon name="information" class="icon d-block" />
       </button>
 
       <gl-popover

ee/app/assets/javascripts/related_issues/components/issue_token.vue

@@ -75,7 +75,7 @@ export default {
         <icon
           v-if="hasState"
           v-tooltip
-          :css-classes="iconClass"
+          :class="iconClass"
           :name="iconName"
           :size="12"
           :title="stateTitle"

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue

@@ -61,7 +61,7 @@ export default {
           :class="{ 'ml-2': index }"
           class="d-inline-flex align-items-center"
         >
-          <icon :size="16" :name="item.iconName" css-classes="text-secondary mr-1" />
+          <icon :size="16" :name="item.iconName" class="text-secondary mr-1" />
           {{ item.count }}
         </span>
       </div>

ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue

@@ -110,7 +110,7 @@ export default {
         <div class="item-title d-flex align-items-center mb-1 mb-xl-0">
           <icon
             ref="stateIconLg"
-            :css-classes="stateIconClass"
+            :class="stateIconClass"
             :name="stateIconName"
             :size="16"
             :aria-label="stateText"
@@ -129,7 +129,7 @@ export default {
             :title="__('Confidential')"
             :aria-label="__('Confidential')"
             name="eye-slash"
-            css-classes="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
+            class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
           />
           <gl-link :href="computedPath" class="sortable-link">{{ item.title }}</gl-link>
         </div>
@@ -139,7 +139,7 @@ export default {
           >
             <icon
               ref="stateIconMd"
-              :css-classes="stateIconClass"
+              :class="stateIconClass"
               :name="stateIconName"
               :size="16"
               :aria-label="stateText"
@@ -193,7 +193,7 @@ export default {
           class="btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button"
           @click="handleRemoveClick"
         >
-          <icon :size="16" name="close" css-classes="btn-item-remove-icon" />
+          <icon :size="16" name="close" class="btn-item-remove-icon" />
         </gl-button>
         <span v-if="!parentItem.userPermissions.adminEpic" class="p-3"></span>
       </div>

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue

@@ -84,7 +84,7 @@ export default {
             <icon
               v-show="vulnerability.dismissal_feedback.comment_details"
               name="comment"
-              css-classes="text-warning vertical-align-middle"
+              class="text-warning vertical-align-middle"
             />
             <span class="vertical-align-middle text-uppercase">{{
               s__('vulnerability|dismissed')

ee/app/assets/javascripts/security_dashboard/components/vulnerability_issue_link.vue

@@ -33,7 +33,7 @@ export default {
     <icon
       v-gl-tooltip
       name="issue-created"
-      css-classes="text-success vertical-align-middle"
+      class="text-success vertical-align-middle"
       :title="s__('Security Dashboard|Issue Created')"
     />
     <a :href="issue.issue_url" class="vertical-align-middle">{{ linkText }}</a>

ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue

@@ -147,7 +147,7 @@ export default {
       <template slot="modal-ok">
         <a :href="link" target="_blank" rel="noopener noreferrer nofollow" class="text-white">
           {{ s__('VisualReviewApp|Open review app') }}
-          <icon css-classes="fwhite" name="external-link" />
+          <icon class="fwhite" name="external-link" />
         </a>
       </template>
       <p v-html="instructionText.intro.p1"></p>

ee/app/assets/javascripts/vue_shared/security_reports/components/event_item.vue

@@ -93,7 +93,7 @@ export default {
           :title="button.title"
           @click="$emit(button.emit)"
         >
-          <icon :name="button.iconName" css-classes="link-highlight" />
+          <icon :name="button.iconName" class="link-highlight" />
         </gl-button>
       </div>
     </div>

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/metric_chart_spec.js.snap

@@ -34,7 +34,6 @@ exports[`MetricChart component template when isLoading is false and chartData is
         <icon-stub
           aria-label="Selected"
           class="flex-shrink-0 append-right-4 invisible"
-          cssclasses=""
           name="mobile-issue-close"
           size="16"
           title="Selected"
@@ -54,7 +53,6 @@ exports[`MetricChart component template when isLoading is false and chartData is
         <icon-stub
           aria-label="Selected"
           class="flex-shrink-0 append-right-4 invisible"
-          cssclasses=""
           name="mobile-issue-close"
           size="16"
           title="Selected"

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/mr_table_spec.js.snap

@@ -51,7 +51,6 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                 >
                   <icon-stub
                     class="flex-shrink-0 append-right-4 invisible"
-                    cssclasses=""
                     name="mobile-issue-close"
                     size="16"
                   />
@@ -69,7 +68,6 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                 >
                   <icon-stub
                     class="flex-shrink-0 append-right-4"
-                    cssclasses=""
                     name="mobile-issue-close"
                     size="16"
                   />
@@ -87,7 +85,6 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                 >
                   <icon-stub
                     class="flex-shrink-0 append-right-4 invisible"
-                    cssclasses=""
                     name="mobile-issue-close"
                     size="16"
                   />

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_actions_spec.js.snap

@@ -18,7 +18,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
         >
           <icon-stub
             class="flex-shrink-0 append-right-4"
-            cssclasses=""
             name="mobile-issue-close"
             size="16"
           />
@@ -33,7 +32,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
         >
           <icon-stub
             class="flex-shrink-0 append-right-4 invisible"
-            cssclasses=""
             name="mobile-issue-close"
             size="16"
           />
@@ -48,7 +46,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
         >
           <icon-stub
             class="flex-shrink-0 append-right-4 invisible"
-            cssclasses=""
             name="mobile-issue-close"
             size="16"
           />
@@ -65,7 +62,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
       title=""
     >
       <icon-stub
-        cssclasses=""
         name="sort-lowest"
         size="16"
       />
@@ -80,7 +76,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
     title=""
   >
     <icon-stub
-      cssclasses=""
       name="download"
       size="16"
     />

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_table_row_spec.js.snap

@@ -25,7 +25,6 @@ exports[`DependenciesTableRow component when a dependency with no vulnerabilitie
         >
           <icon-stub
             class="align-middle mr-1"
-            cssclasses=""
             name="check-circle"
             size="16"
           />
@@ -160,7 +159,6 @@ exports[`DependenciesTableRow component when a dependency with vulnerabilities i
         >
           <icon-stub
             class="align-top text-secondary-700 d-none d-md-inline"
-            cssclasses=""
             name="arrow-down"
             size="16"
           />

ee/spec/frontend/dependencies/components/__snapshots__/dependency_list_alert_spec.js.snap

@@ -10,7 +10,6 @@ exports[`DependencyListAlert component given no props matches the snapshot 1`] =
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="close"
       size="16"
     />
@@ -37,7 +36,6 @@ exports[`DependencyListAlert component given the headerText prop matches the sna
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="close"
       size="16"
     />
@@ -68,7 +66,6 @@ exports[`DependencyListAlert component given the warning type and headerText pro
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="close"
       size="16"
     />

ee/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -64,7 +64,7 @@ exports[`Design management list item component renders item with correct status
         title="Added in this version"
       >
         <icon-stub
-          cssclasses="text-success-500"
+          class="text-success-500"
           name="file-addition-solid"
           size="18"
         />
@@ -125,7 +125,7 @@ exports[`Design management list item component renders item with correct status
         title="Deleted in this version"
       >
         <icon-stub
-          cssclasses="text-danger-500"
+          class="text-danger-500"
           name="file-deletion-solid"
           size="18"
         />
@@ -186,7 +186,7 @@ exports[`Design management list item component renders item with correct status
         title="Modified in this version"
       >
         <icon-stub
-          cssclasses="text-primary-500"
+          class="text-primary-500"
           name="file-modified-solid"
           size="18"
         />
@@ -279,7 +279,6 @@ exports[`Design management list item component renders item with multiple commen
     >
       <icon-stub
         class="ml-1"
-        cssclasses=""
         name="comments"
         size="16"
       />
@@ -393,7 +392,6 @@ exports[`Design management list item component renders item with single comment
     >
       <icon-stub
         class="ml-1"
-        cssclasses=""
         name="comments"
         size="16"
       />

ee/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap

@@ -9,7 +9,6 @@ exports[`Design management toolbar component renders design and updated data 1`]
     class="mr-3 text-plain"
   >
     <icon-stub
-      cssclasses=""
       name="close"
       size="18"
     />

ee/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap

@@ -8,7 +8,6 @@ exports[`Design management pagination button component disables button when no d
   to="[object Object]"
 >
   <icon-stub
-    cssclasses=""
     name="angle-right"
     size="16"
   />
@@ -22,7 +21,6 @@ exports[`Design management pagination button component renders router-link 1`] =
   to="[object Object]"
 >
   <icon-stub
-    cssclasses=""
     name="angle-right"
     size="16"
   />

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap

@@ -119,7 +119,7 @@ exports[`Environment Header with environments grouped into a folder matches the
   </div>
    
   <icon-stub
-    cssclasses="dashboard-card-icon"
+    class="dashboard-card-icon"
     data-original-title="You are looking at the last updated environment"
     name="information"
     size="16"

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_spec.js.snap

@@ -37,7 +37,6 @@ exports[`Environment matchs the snapshot 1`] = `
           class="branch-commit"
         >
           <icon-stub
-            cssclasses=""
             name="work"
             size="16"
           />

ee/spec/frontend/environments_dashboard/components/__snapshots__/project_header_spec.js.snap

@@ -59,7 +59,6 @@ exports[`Project Header matches the snapshot 1`] = `
     >
       <icon-stub
         class="text-secondary"
-        cssclasses=""
         name="ellipsis_v"
         size="16"
       />

ee/spec/frontend/licenses/components/cards/__snapshots__/license_card_body_spec.js.snap

@@ -203,7 +203,6 @@ exports[`LicenseCardBody renders a loading state if isRemoving 1`] = `
     class="p-5 d-flex justify-content-center align-items-center license-card-loading"
   >
     <icon-stub
-      cssclasses=""
       name="spinner"
       size="16"
     />

ee/spec/frontend/licenses/components/cells/__snapshots__/header_cell_spec.js.snap

@@ -7,7 +7,6 @@ exports[`HeaderCell renders an inflexible cell with a title with an icon through
   <template>
     <icon-stub
       class="icon"
-      cssclasses=""
       name="retry"
       size="16"
     />

ee/spec/frontend/licenses/components/cells/__snapshots__/info_cell_spec.js.snap

@@ -18,7 +18,7 @@ exports[`InfoCell renders a number value 1`] = `
       type="button"
     >
       <icon-stub
-        cssclasses="icon d-block"
+        class="icon d-block"
         name="information"
         size="16"
       />
@@ -52,7 +52,7 @@ exports[`InfoCell renders a title and string value with an info popover through
       type="button"
     >
       <icon-stub
-        cssclasses="icon d-block"
+        class="icon d-block"
         name="information"
         size="16"
       />

spec/frontend/notes/components/__snapshots__/discussion_jump_to_next_button_spec.js.snap

@@ -11,7 +11,6 @@ exports[`JumpToNextDiscussionButton matches the snapshot 1`] = `
     title=""
   >
     <icon-stub
-      cssclasses=""
       name="comment-next"
       size="16"
     />

spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap

@@ -14,7 +14,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="eye"
       size="16"
     />
@@ -40,7 +39,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
       <icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline"
-        cssclasses=""
         name="eye"
         size="16"
       />
@@ -68,7 +66,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="eye"
       size="16"
     />
@@ -104,7 +101,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
       <icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline"
-        cssclasses=""
         name="eye"
         size="16"
       />
@@ -132,7 +128,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="eye-slash"
       size="16"
     />
@@ -158,7 +153,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
       <icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline is-active"
-        cssclasses=""
         name="eye-slash"
         size="16"
       />
@@ -186,7 +180,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
   >
     <icon-stub
       aria-hidden="true"
-      cssclasses=""
       name="eye-slash"
       size="16"
     />
@@ -222,7 +215,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
       <icon-stub
         aria-hidden="true"
         class="sidebar-item-icon inline is-active"
-        cssclasses=""
         name="eye-slash"
         size="16"
       />

spec/frontend/sidebar/__snapshots__/todo_spec.js.snap

@@ -14,7 +14,7 @@ exports[`SidebarTodo template renders component container element with proper da
   type="button"
 >
   <icon-stub
-    cssclasses="todo-undone"
+    class="todo-undone"
     name="todo-done"
     size="16"
     style="display: none;"

spec/frontend/sidebar/todo_spec.js

@@ -44,7 +44,12 @@ describe('SidebarTodo', () => {
     ({ isTodo, iconClass, label, icon }) => {
       createComponent({ isTodo });
 
-      expect(wrapper.find(Icon).props('cssClasses')).toStrictEqual(iconClass);
+      expect(
+        wrapper
+          .find(Icon)
+          .classes()
+          .join(' '),
+      ).toStrictEqual(iconClass);
       expect(wrapper.find(Icon).props('name')).toStrictEqual(icon);
       expect(wrapper.find('button').text()).toBe(label);
     },

spec/frontend/vue_shared/components/changed_file_icon_spec.js

@@ -28,10 +28,7 @@ describe('Changed file icon', () => {
 
   const findIcon = () => wrapper.find(Icon);
   const findIconName = () => findIcon().props('name');
-  const findIconClasses = () =>
-    findIcon()
-      .props('cssClasses')
-      .split(' ');
+  const findIconClasses = () => findIcon().classes();
   const findTooltipText = () => wrapper.attributes('data-original-title');
 
   it('with isCentered true, adds center class', () => {

spec/frontend/vue_shared/components/file_icon_spec.js

@@ -49,7 +49,7 @@ describe('File Icon component', () => {
     });
 
     expect(findIcon().exists()).toBe(false);
-    expect(wrapper.find(Icon).props('cssClasses')).toContain('folder-icon');
+    expect(wrapper.find(Icon).classes()).toContain('folder-icon');
   });
 
   it('should render a loading icon', () => {

spec/javascripts/vue_shared/components/icon_spec.js

@@ -12,8 +12,6 @@ describe('Sprite Icon Component', function() {
       icon = mountComponent(IconComponent, {
         name: 'commit',
         size: 32,
-        cssClasses: 'extraclasses',
-        tabIndex: '0',
       });
     });
 
@@ -47,10 +45,8 @@ describe('Sprite Icon Component', function() {
     it('should properly render img css', function() {
       const { classList } = icon.$el;
       const containsSizeClass = classList.contains('s32');
-      const containsCustomClass = classList.contains('extraclasses');
 
       expect(containsSizeClass).toBe(true);
-      expect(containsCustomClass).toBe(true);
     });
 
     it('`name` validator should return false for non existing icons', () => {
@@ -60,9 +56,5 @@ describe('Sprite Icon Component', function() {
     it('`name` validator should return false for existing icons', () => {
       expect(Icon.props.name.validator('commit')).toBe(true);
     });
-
-    it('should contain `tabindex` attribute on svg element when `tabIndex` prop is defined', () => {
-      expect(icon.$el.getAttribute('tabindex')).toBe('0');
-    });
   });
 });