Using the lightbulb icon for linking to the documentation (#25013)

* Using the lightbulb icon for linking to the documentation

* Using the LightbulbOutlineIcon component

* Generating the test snapshot

webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap

@@ -54,9 +54,18 @@ Object {
               rel="noopener noreferrer"
               target="_blank"
             >
-              <i
+              <svg
-                class="icon icon-help-circle-outline"
+                fill="currentColor"
-              />
+                height="1em"
+                version="1.1"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z"
+                />
+              </svg>
               <span>
                 Learn more about notifications
               </span>
@@ -278,9 +287,18 @@ Object {
             rel="noopener noreferrer"
             target="_blank"
           >
-            <i
+            <svg
-              class="icon icon-help-circle-outline"
+              fill="currentColor"
-            />
+              height="1em"
+              version="1.1"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z"
+              />
+            </svg>
             <span>
               Learn more about notifications
             </span>

webapp/channels/src/components/user_settings/notifications/user_settings_notifications.scss

@@ -13,6 +13,7 @@
 
         a {
             display: flex;
+            align-items: center;
 
             &:hover,
             &:active,
@@ -34,6 +35,16 @@
                     text-decoration: underline;
                 }
             }
+
+            > svg {
+                width: 18px;
+                height: 18px;
+                padding: 2px;
+                margin-right: 4px;
+                background: rgba(var(--button-bg-rgb), 0.12);
+                border-radius: 50%;
+                text-align: center;
+            }
         }
     }
 }

webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx

@@ -10,6 +10,7 @@ import {FormattedMessage, injectIntl} from 'react-intl';
 import type {Styles as ReactSelectStyles, ValueType} from 'react-select';
 import CreatableReactSelect from 'react-select/creatable';
 
+import {LightbulbOutlineIcon} from '@mattermost/compass-icons/components';
 import type {ServerError} from '@mattermost/types/errors';
 import type {UserNotifyProps, UserProfile} from '@mattermost/types/users';
 
@@ -1102,7 +1103,7 @@ class NotificationsTab extends React.PureComponent<Props, State> {
                             values={{
                                 a: (chunks: string) => ((
                                     <ExternalLink href='https://mattermost.com/pl/about-notifications'>
-                                        <i className='icon icon-help-circle-outline'/>
+                                        <LightbulbOutlineIcon/>
                                         <span>{chunks}</span>
                                     </ExternalLink>
                                 )),