Issue #3418489 by ahsannazir, m4olivei, patrickfgoddard, Amandeep123,...

Issue #3418489 by ahsannazir, m4olivei, patrickfgoddard, Amandeep123, adwivedi008, ckrina, Kanchan Bhogade, rkoller, xjm, smustgrave, baluv3, kostyashupenko, plopesc, finnsky: Choose an icon for the Announcements link

(cherry picked from commit ebb6a6e3)

core/modules/navigation/assets/icons/announcement.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path fill="none" d="M0 0h256v256H0z"/>
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M160 80v120.67a8 8 0 0 0 3.56 6.65l11 7.33a8 8 0 0 0 12.2-4.72L200 160"/>
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M40 200a8 8 0 0 0 13.15 6.12C105.55 162.16 160 160 160 160h40a40 40 0 0 0 0-80h-40s-54.45-2.16-106.85-46.11A8 8 0 0 0 40 40Z"/>
+</svg>

core/modules/navigation/css/components/toolbar-button.css

@@ -243,6 +243,15 @@
 .toolbar-button--icon--user {
   --icon: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M10 1.875C8.39303 1.875 6.82214 2.35152 5.486 3.24431C4.14985 4.1371 3.10844 5.40605 2.49348 6.8907C1.87852 8.37535 1.71762 10.009 2.03112 11.5851C2.34463 13.1612 3.11846 14.6089 4.25476 15.7452C5.39106 16.8815 6.8388 17.6554 8.4149 17.9689C9.99099 18.2824 11.6247 18.1215 13.1093 17.5065C14.594 16.8916 15.8629 15.8502 16.7557 14.514C17.6485 13.1779 18.125 11.607 18.125 10C18.1227 7.84581 17.266 5.78051 15.7427 4.25727C14.2195 2.73403 12.1542 1.87727 10 1.875ZM5.7875 15.4297C6.23964 14.7226 6.86251 14.1406 7.59869 13.7375C8.33488 13.3345 9.16069 13.1232 10 13.1232C10.8393 13.1232 11.6651 13.3345 12.4013 13.7375C13.1375 14.1406 13.7604 14.7226 14.2125 15.4297C13.0081 16.3664 11.5258 16.8749 10 16.8749C8.4742 16.8749 6.99193 16.3664 5.7875 15.4297ZM7.5 9.375C7.5 8.88055 7.64663 8.3972 7.92133 7.98607C8.19603 7.57495 8.58648 7.25452 9.04329 7.0653C9.50011 6.87608 10.0028 6.82657 10.4877 6.92304C10.9727 7.0195 11.4181 7.2576 11.7678 7.60723C12.1174 7.95686 12.3555 8.40232 12.452 8.88727C12.5484 9.37223 12.4989 9.87489 12.3097 10.3317C12.1205 10.7885 11.8001 11.179 11.3889 11.4537C10.9778 11.7284 10.4945 11.875 10 11.875C9.33696 11.875 8.70108 11.6116 8.23224 11.1428C7.7634 10.6739 7.5 10.038 7.5 9.375ZM15.1375 14.5633C14.4404 13.5532 13.4603 12.7717 12.3203 12.3172C12.9327 11.8349 13.3795 11.1737 13.5987 10.4257C13.8179 9.67766 13.7985 8.87992 13.5433 8.1434C13.2881 7.40687 12.8097 6.76819 12.1746 6.31616C11.5396 5.86414 10.7795 5.62123 10 5.62123C9.22052 5.62123 8.4604 5.86414 7.82536 6.31616C7.19033 6.76819 6.71193 7.40687 6.45671 8.1434C6.20149 8.87992 6.18212 9.67766 6.40131 10.4257C6.62049 11.1737 7.06734 11.8349 7.67969 12.3172C6.5397 12.7717 5.55956 13.5532 4.8625 14.5633C3.9817 13.5728 3.406 12.3488 3.20473 11.0387C3.00346 9.72856 3.1852 8.3882 3.72806 7.17898C4.27093 5.96977 5.15178 4.94326 6.26454 4.22308C7.3773 3.50289 8.67452 3.11972 10 3.11972C11.3255 3.11972 12.6227 3.50289 13.7355 4.22308C14.8482 4.94326 15.7291 5.96977 16.2719 7.17898C16.8148 8.3882 16.9966 9.72856 16.7953 11.0387C16.594 12.3488 16.0183 13.5728 15.1375 14.5633Z' fill='currentColor'/%3e%3c/svg%3e");
 }
+.toolbar-button--icon--announcements-feed-announcement {
+  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3e  %3cpath fill='none' d='M0 0h256v256H0z'/%3e  %3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M160 80v120.67a8 8 0 0 0 3.56 6.65l11 7.33a8 8 0 0 0 12.2-4.72L200 160'/%3e  %3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M40 200a8 8 0 0 0 13.15 6.12C105.55 162.16 160 160 160 160h40a40 40 0 0 0 0-80h-40s-54.45-2.16-106.85-46.11A8 8 0 0 0 40 40Z'/%3e%3c/svg%3e");
+}
+.toolbar-button--icon--announcements-feed-announcement::before {
+  transform: scaleX(-1);
+}
+[dir="rtl"] .toolbar-button--icon--announcements-feed-announcement::before {
+  transform: scaleX(1);
+}
 html:not([data-admin-toolbar="expanded"]) .toolbar-button--collapsible::after {
   display: none;
 }

core/modules/navigation/css/components/toolbar-button.pcss.css

@@ -106,6 +106,7 @@
     mask-repeat: no-repeat;
     mask-position: center center;
     mask-size: 100% auto;
+    -webkit-mask-image: var(--icon);
     mask-image: var(--icon);
   }
 
@@ -286,6 +287,19 @@
   --icon: url(../../assets/icons/user.svg);
 }
 
+.toolbar-button--icon--announcements-feed-announcement {
+  --icon: url(../../assets/icons/announcement.svg);
+  &::before {
+    transform: scaleX(-1);
+  }
+
+  [dir="rtl"] & {
+    &::before {
+      transform: scaleX(1);
+    }
+  }
+}
+
 html:not([data-admin-toolbar="expanded"]) {
   .toolbar-button--collapsible::after {
     display: none;