Add a set of sizes to icon component

Bug: 414330824
Change-Id: I183856a4f58d36a8e775c04b735aab873916de47
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6845987
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>

Author: Kateryna Prokopenko

front_end/ui/components/icon_button/icon.css

@@ -15,6 +15,31 @@
   position: relative;
 }
 
+:host(.extra-small) {
+  height: var(--sys-size-6);
+  width: var(--sys-size-6);
+}
+
+:host(.small) {
+  height: var(--sys-size-7);
+  width: var(--sys-size-7);
+}
+
+:host(.medium) {
+  height: var(--sys-size-8);
+  width: var(--sys-size-8);
+}
+
+:host(.large) {
+  height: 18px;
+  width: 18px;
+}
+
+:host(.extra-large) {
+  height: var(--sys-size-9);
+  width: var(--sys-size-9);
+}
+
 :host([hidden]) {
   display: none;
 }