Replace composer icons with Compound variants

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -65,11 +65,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconSource::before {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/code.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
     }
 
     .mx_MessageContextMenu_iconQuote::before {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/quote.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
     }
 
     .mx_MessageContextMenu_iconPin::before {

res/css/views/rooms/_MessageComposer.pcss

@@ -265,11 +265,11 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_MessageComposer_rich_text::before {
-    mask-image: url("$(res)/img/element-icons/room/composer/rich_text.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg");
 }
 
 .mx_MessageComposer_location::before {
-    mask-image: url("$(res)/img/element-icons/room/composer/location.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/location-pin-solid.svg");
 }
 
 .mx_MessageComposer_stickers::before {

res/css/views/rooms/_MessageComposerFormatBar.pcss

@@ -55,6 +55,7 @@ Please see LICENSE files in the repository root for full details.
         width: 100%;
         mask-repeat: no-repeat;
         mask-position: center;
+        mask-size: 20px;
         background-color: var(--cpd-color-icon-secondary);
     }
 
@@ -63,28 +64,27 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageComposerFormatBar_buttonIconBold::after {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/bold.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/bold.svg");
     }
 
     .mx_MessageComposerFormatBar_buttonIconItalic::after {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/italic.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/italic.svg");
     }
 
     .mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/strikethrough.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/strikethrough.svg");
     }
 
     .mx_MessageComposerFormatBar_buttonIconQuote::after {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/quote.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
     }
 
     .mx_MessageComposerFormatBar_buttonIconCode::after {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/code.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
     }
 
     .mx_MessageComposerFormatBar_buttonIconInsertLink::after {
-        mask-image: url("$(res)/img/element-icons/link.svg");
-        mask-size: 18px;
+        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
     }
 }