MM-58854 Update how Compass icons are referenced by AnnouncementBar (#27461)

Automatic Merge

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss

@@ -140,16 +140,6 @@
         fill: currentColor;
     }
 
-    &__icon {
-        display: inline-flex;
-        width: 100%;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-        font-family: "compass-icons";
-        font-size: 18px;
-    }
-
     &__cell {
         position: relative;
         display: flex;

webapp/channels/src/components/announcement_bar/__snapshots__/text_dismissable_bar.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`components/TextDismissableBar should match snapshot 1`] = `
   message={
     <React.Fragment>
       <i
-        className="icon-information-outline"
+        className="icon icon-information-outline"
       />
       <Memo(Connect(Markdown))
         message="sample text"
@@ -32,7 +32,7 @@ exports[`components/TextDismissableBar should match snapshot, with an internal a
   message={
     <React.Fragment>
       <i
-        className="icon-information-outline"
+        className="icon icon-information-outline"
       />
       <Memo(Connect(Markdown))
         message="A [link](http://testurl.com/admin_console/) with an internal url and a [link](http://other-url.com/admin_console/) with an external url"
@@ -58,7 +58,7 @@ exports[`components/TextDismissableBar should match snapshot, with an internal u
   message={
     <React.Fragment>
       <i
-        className="icon-information-outline"
+        className="icon icon-information-outline"
       />
       <Memo(Connect(Markdown))
         message="A [link](http://testurl.com/admin_console/) with an internal url"
@@ -84,7 +84,7 @@ exports[`components/TextDismissableBar should match snapshot, with ean external
   message={
     <React.Fragment>
       <i
-        className="icon-information-outline"
+        className="icon icon-information-outline"
       />
       <Memo(Connect(Markdown))
         message="A [link](http://otherurl.com/admin_console/) with an external url"
@@ -110,7 +110,7 @@ exports[`components/TextDismissableBar should match snapshot, with link but with
   message={
     <React.Fragment>
       <i
-        className="icon-information-outline"
+        className="icon icon-information-outline"
       />
       <Memo(Connect(Markdown))
         message="A [link](http://testurl.com/admin_console/)"

webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx

@@ -164,7 +164,7 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
 
         const announcementIcon = () => {
             return this.props.showLinkAsButton &&
-            (this.props.showCloseButton ? <div className='content__icon'>{'\uF5D6'}</div> : <div className='content__icon'>{'\uF02A'}</div>);
+            (this.props.showCloseButton ? <i className='icon icon-alert-circle-outline'/> : <i className='icon icon-alert-outline'/>);
         };
 
         return (

webapp/channels/src/components/announcement_bar/text_dismissable_bar.tsx

@@ -67,7 +67,7 @@ export default class TextDismissableBar extends React.PureComponent<Props, State
                 handleClose={this.handleDismiss}
                 message={
                     <>
-                        <i className='icon-information-outline'/>
+                        <i className='icon icon-information-outline'/>
                         {typeof text === 'string' ? (
                             <Markdown
                                 message={text}

webapp/channels/src/components/status_dropdown/status_dropdown.scss

@@ -160,11 +160,6 @@ button.custom_status__row {
     padding: 4px 8px;
     border-radius: 4px;
 
-    .icon > i:not(.status-icon) {
-        color: rgba(var(--center-channel-color-rgb), 0.64);
-        font-family: "compass-icons";
-    }
-
     &:hover {
         background: var(--sidebar-text-08);
         cursor: pointer;

webapp/channels/src/sass/components/_announcement-bar.scss

@@ -87,10 +87,7 @@
         content: "\00a0 ";
     }
 
-    .content__icon,
+    .icon {
-    i {
-        margin-right: 4px;
-        font-family: 'compass-icons';
         font-size: 16px;
     }