Replace `<i>` in vue components with `<icon>`

What does this MR do?

Replaces <i> to <icon> in vue components. This includes to changes to following vue templates (and one haml template to avoid inconsistency between dismisable banners):

• issue_card_inner.vue
• boards/components/issue_card_inner.vue
• boards/components/modal/list.vue
• boards/components/modal/lists_dropdown.vue
• boards/components/project_select.vue
• cycle_analytics/components/banner.vue
• diffs/components/compare_versions_dropdown.vue
• environments/components/environment_actions.vue
• environments/components/environment_item.vue
• frequent_items/components/frequent_items_search_input.vue
• vue_shared/components/notes/system_note.vue
• app/views/explore/groups/index.html.haml

Are there points in the code the reviewer needs to double check?

See discussions below.

Screenshots (if relevant)

Before	After

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Tests added for this feature/bug
• Conforms to the code review guidelines
  • Has been reviewed by a UX Designer
  • Has been reviewed by a Frontend maintainer

What are the relevant issue numbers?

This is related to #44646 (moved). Some sections were left behind (like Web IDE icons), to avoid making this merge request too large. Second iteration should replace more <i>s.