View helpful system note in comment threads

Update the system note designs (especially the icon) per the designs.
This applies to all comment threads in GitLab, in issues, merge requests.
The technical solution should unblock https://gitlab.com/gitlab-org/gitlab-ce/issues/19836.

Use the same design icon for:
- Commit-related --> systemnote-commit.svg
- Merge-related --> icon-merge.svg
- Mentioning other issues / merge requests --> systemnote-mentioning-issue.svg / systemnote-mentioning-mr.svg
- Status-related for issues and merge request --> close / open / merged
- (The icons above are in systemnote-stauts-icons )
- Label-related --> fa-tags
- Assignee-related --> fa-user
- Title change --> fa-pencil (This includes when WIP has been toggled for a merge request title.)
- Time-tracking-related --> stopwatch.svg
- ~~Legacy system notes will not be backfilled when this is deployed. So those legacy system notes should have icon fa-diamond.~~ Per https://gitlab.slack.com/archives/C03MSG8B7/p1491502135999977.
- Milestone-related --> fa-clock-o
- Branch-related --> fa-code-fork
- Discussion-related --> fa-comments-o
- Issue confidentiality --> Visible: fa-eye, Confidential: fa-eye-slash
- Cross_reference --> fa-random
- Title --> fa-pencil
- Discussion --> fa-comments-o
- Task --> fa-check-square-o
- EE: Approval/ Unapproval --> fa-check / fa-close
The targeted designs are from: https://gitlab.com/gitlab-org/gitlab-ce/issues/19797.
Mobile: system-note-mobile
Desktop: system-note
Example from above:

system_note_title should be send with links without p wrapper and :.
system_note_title verb should not be capitalize.
system_note_body should send with commit list with html wrapper as as it is without header text.
Should have a field/flag like which indicates how many commits are pushed in a commit list
support for icons as per issue #23129 (closed)