Project settings: Replace fa-chevron-down with SVG

app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue

 <script>
+import { GlIcon } from '@gitlab/ui';
 import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue';
 import { featureAccessLevelNone } from '../constants';
 
 export default {
   components: {
+    GlIcon,
     projectFeatureToggle,
   },
-
   model: {
     prop: 'value',
     event: 'change',
   },
-
   props: {
     name: {
       type: String,
@@ -34,7 +34,6 @@ export default {
       default: false,
     },
   },
-
   computed: {
     featureEnabled() {
       return this.value !== 0;
@@ -51,7 +50,6 @@ export default {
       return this.disabledInput || !this.featureEnabled || this.displayOptions.length < 2;
     },
   },
-
   methods: {
     toggleFeature(featureEnabled) {
       if (featureEnabled === false || this.options.length < 1) {
@@ -96,7 +94,11 @@ export default {
           {{ optionName }}
         </option>
       </select>
-      <i aria-hidden="true" class="fa fa-chevron-down"> </i>
+      <gl-icon
+        name="chevron-down"
+        aria-hidden="true"
+        class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
+      />
     </div>
   </div>
 </template>

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

 <script>
-import { GlSprintf, GlLink, GlFormCheckbox } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlLink, GlFormCheckbox } from '@gitlab/ui';
 
 import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin';
 import { s__ } from '~/locale';
@@ -22,6 +22,7 @@ export default {
     projectFeatureSetting,
     projectFeatureToggle,
     projectSettingRow,
+    GlIcon,
     GlSprintf,
     GlLink,
     GlFormCheckbox,
@@ -325,7 +326,12 @@ export default {
                 >{{ s__('ProjectSettings|Public') }}</option
               >
             </select>
-            <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
+            <gl-icon
+              name="chevron-down"
+              aria-hidden="true"
+              data-hidden="true"
+              class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
+            />
           </div>
         </div>
         <span class="form-text text-muted">{{ visibilityLevelDescription }}</span>
@@ -540,7 +546,12 @@ export default {
                 >{{ featureAccessLevelEveryone[1] }}</option
               >
             </select>
-            <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
+            <gl-icon
+              name="chevron-down"
+              aria-hidden="true"
+              data-hidden="true"
+              class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
+            />
           </div>
         </div>
       </project-setting-row>

changelogs/unreleased/mw-project-settings-icon-replacements.yml

+---
+title: Replace fa-chevron-down with GitLab SVG in project visibility settings
+merge_request: 45021
+author:
+type: changed