Refactor: Mini-pipeline should use `<ci-icon>`

Description

When displaying our mini-pipelines, icons shown do not use the ci_icon.vue component and so mini-pipeline duplicates the border and colors CSS and logic of the more widely used <ci-icon>. Relevant line:

• https://gitlab.com/gitlab-org/gitlab/blob/1e363865da5b697415eed634d27fe9073fe8f2c2/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue#L172

Compare left and right icons below:

Proposal

Implement the mini-pipeline to use the <ci-icon> to render the status.

Expected UI side-effect

As in !52516 (merged), the border of the icons would become slightly thicker, but it would become consistent with the rest of the <ci-icons> appearance.

Original Discussion

The following discussion from !52516 (merged) should be addressed:

• @markrian started a discussion: (+1 comment)

  question: Does it matter that the pipeline graph on the right of the pipeline widget still uses the borderless icon?

  This means that the icon on the left now has a thicker border than the pipeline icons on the right.

  This probably doesn't matter, because the ones on the right are interactive, and have hover styles which make the outline thicker.

  WDYT?