feat(icons): add 4 system icons

ref: MANAGER-13984

Signed-off-by: Amandine Dectot <[email protected]>

Author: Amandine Dectot

packages/apps/workshop/stories/design-system/content/icons.stories.js

@@ -52,6 +52,26 @@ export const System = () => `
     <div class="doc-badge__code"><code>.oui-icon-arrow-transfer</code></div>
   </div>
 
+<div class="doc-badge">
+    <div class="doc-badge__preview doc-badge__preview_s"><span class="oui-icon oui-icon-arrow-down-left-arrow-up-right-to-center"></span></div>
+    <div class="doc-badge__code"><code>.oui-icon-arrow-down-left-arrow-up-right-to-center</code></div>
+  </div>
+
+ <div class="doc-badge">
+    <div class="doc-badge__preview doc-badge__preview_s"><span class="oui-icon oui-icon-arrow-up-right-arrow-down-left-from-center"></span></div>
+    <div class="doc-badge__code"><code>.oui-icon-arrow-up-right-arrow-down-left-from-center</code></div>
+  </div>
+
+<div class="doc-badge">
+    <div class="doc-badge__preview doc-badge__preview_s"><span class="oui-icon oui-icon-play"></span></div>
+    <div class="doc-badge__code"><code>.oui-icon-play</code></div>
+  </div>
+
+<div class="doc-badge">
+    <div class="doc-badge__preview doc-badge__preview_s"><span class="oui-icon oui-icon-pause"></span></div>
+    <div class="doc-badge__code"><code>.oui-icon-pause</code></div>
+  </div>
+
   <div class="doc-badge">
     <div class="doc-badge__preview doc-badge__preview_s"><span class="oui-icon oui-icon-bell"></span></div>
     <div class="doc-badge__code"><code>.oui-icon-bell</code></div>

packages/base/core/src/css/tokens/_icons.css

@@ -199,80 +199,84 @@
   --oui-icon-index-world-add_concept: "\f1c2";
   --oui-icon-index-world_concept: "\f1c3";
   --oui-icon-index-add: "\f1c4";
-  --oui-icon-index-arrow-down-right: "\f1c5";
-  --oui-icon-index-arrow-down: "\f1c6";
-  --oui-icon-index-arrow-left: "\f1c7";
-  --oui-icon-index-arrow-right: "\f1c8";
-  --oui-icon-index-arrow-transfer: "\f1c9";
-  --oui-icon-index-arrow-up-right: "\f1ca";
-  --oui-icon-index-arrow-up: "\f1cb";
-  --oui-icon-index-bell: "\f1cc";
-  --oui-icon-index-bin: "\f1cd";
-  --oui-icon-index-book: "\f1ce";
-  --oui-icon-index-calendar: "\f1cf";
-  --oui-icon-index-cart: "\f1d0";
-  --oui-icon-index-chat: "\f1d1";
-  --oui-icon-index-check: "\f1d2";
-  --oui-icon-index-chevron-down: "\f1d3";
-  --oui-icon-index-chevron-left: "\f1d4";
-  --oui-icon-index-chevron-right: "\f1d5";
-  --oui-icon-index-chevron-up-down: "\f1d6";
-  --oui-icon-index-chevron-up: "\f1d7";
-  --oui-icon-index-clock-wait: "\f1d8";
-  --oui-icon-index-close: "\f1d9";
-  --oui-icon-index-copy: "\f1da";
-  --oui-icon-index-ellipsis-vertical: "\f1db";
-  --oui-icon-index-ellipsis: "\f1dc";
-  --oui-icon-index-email: "\f1dd";
-  --oui-icon-index-equal: "\f1de";
-  --oui-icon-index-error-circle: "\f1df";
-  --oui-icon-index-error: "\f1e0";
-  --oui-icon-index-external-link: "\f1e1";
-  --oui-icon-index-eye-closed: "\f1e2";
-  --oui-icon-index-eye-open: "\f1e3";
-  --oui-icon-index-file: "\f1e4";
-  --oui-icon-index-filter: "\f1e5";
-  --oui-icon-index-folder: "\f1e6";
-  --oui-icon-index-gear: "\f1e7";
-  --oui-icon-index-guides: "\f1e8";
-  --oui-icon-index-hamburger: "\f1e9";
-  --oui-icon-index-help-circle: "\f1ea";
-  --oui-icon-index-help: "\f1eb";
-  --oui-icon-index-home: "\f1ec";
-  --oui-icon-index-indeterminate: "\f1ed";
-  --oui-icon-index-info-circle: "\f1ee";
-  --oui-icon-index-info: "\f1ef";
-  --oui-icon-index-lightbulb: "\f1f0";
-  --oui-icon-index-list: "\f1f1";
-  --oui-icon-index-location: "\f1f2";
-  --oui-icon-index-lock: "\f1f3";
-  --oui-icon-index-minus: "\f1f4";
-  --oui-icon-index-ok: "\f1f5";
-  --oui-icon-index-ovh: "\f1f6";
-  --oui-icon-index-pen: "\f1f7";
-  --oui-icon-index-phone: "\f1f8";
-  --oui-icon-index-plus: "\f1f9";
-  --oui-icon-index-printer: "\f1fa";
-  --oui-icon-index-refresh: "\f1fb";
-  --oui-icon-index-remove: "\f1fc";
-  --oui-icon-index-search: "\f1fd";
-  --oui-icon-index-settings: "\f1fe";
-  --oui-icon-index-shape-circle: "\f1ff";
-  --oui-icon-index-shape-dot: "\f200";
-  --oui-icon-index-sort-down: "\f201";
-  --oui-icon-index-sort-up: "\f202";
-  --oui-icon-index-sort: "\f203";
-  --oui-icon-index-success-circle: "\f204";
-  --oui-icon-index-success: "\f205";
-  --oui-icon-index-time: "\f206";
-  --oui-icon-index-transfer: "\f207";
-  --oui-icon-index-trash: "\f208";
-  --oui-icon-index-triangle-down: "\f209";
-  --oui-icon-index-triangle-left: "\f20a";
-  --oui-icon-index-triangle-right: "\f20b";
-  --oui-icon-index-triangle-up: "\f20c";
-  --oui-icon-index-truck: "\f20d";
-  --oui-icon-index-user: "\f20e";
-  --oui-icon-index-warning-circle: "\f20f";
-  --oui-icon-index-warning: "\f210";
+  --oui-icon-index-arrow-down-left-arrow-up-right-to-center: "\f1c5";
+  --oui-icon-index-arrow-down-right: "\f1c6";
+  --oui-icon-index-arrow-down: "\f1c7";
+  --oui-icon-index-arrow-left: "\f1c8";
+  --oui-icon-index-arrow-right: "\f1c9";
+  --oui-icon-index-arrow-transfer: "\f1ca";
+  --oui-icon-index-arrow-up-right-arrow-down-left-from-center: "\f1cb";
+  --oui-icon-index-arrow-up-right: "\f1cc";
+  --oui-icon-index-arrow-up: "\f1cd";
+  --oui-icon-index-bell: "\f1ce";
+  --oui-icon-index-bin: "\f1cf";
+  --oui-icon-index-book: "\f1d0";
+  --oui-icon-index-calendar: "\f1d1";
+  --oui-icon-index-cart: "\f1d2";
+  --oui-icon-index-chat: "\f1d3";
+  --oui-icon-index-check: "\f1d4";
+  --oui-icon-index-chevron-down: "\f1d5";
+  --oui-icon-index-chevron-left: "\f1d6";
+  --oui-icon-index-chevron-right: "\f1d7";
+  --oui-icon-index-chevron-up-down: "\f1d8";
+  --oui-icon-index-chevron-up: "\f1d9";
+  --oui-icon-index-clock-wait: "\f1da";
+  --oui-icon-index-close: "\f1db";
+  --oui-icon-index-copy: "\f1dc";
+  --oui-icon-index-ellipsis-vertical: "\f1dd";
+  --oui-icon-index-ellipsis: "\f1de";
+  --oui-icon-index-email: "\f1df";
+  --oui-icon-index-equal: "\f1e0";
+  --oui-icon-index-error-circle: "\f1e1";
+  --oui-icon-index-error: "\f1e2";
+  --oui-icon-index-external-link: "\f1e3";
+  --oui-icon-index-eye-closed: "\f1e4";
+  --oui-icon-index-eye-open: "\f1e5";
+  --oui-icon-index-file: "\f1e6";
+  --oui-icon-index-filter: "\f1e7";
+  --oui-icon-index-folder: "\f1e8";
+  --oui-icon-index-gear: "\f1e9";
+  --oui-icon-index-guides: "\f1ea";
+  --oui-icon-index-hamburger: "\f1eb";
+  --oui-icon-index-help-circle: "\f1ec";
+  --oui-icon-index-help: "\f1ed";
+  --oui-icon-index-home: "\f1ee";
+  --oui-icon-index-indeterminate: "\f1ef";
+  --oui-icon-index-info-circle: "\f1f0";
+  --oui-icon-index-info: "\f1f1";
+  --oui-icon-index-lightbulb: "\f1f2";
+  --oui-icon-index-list: "\f1f3";
+  --oui-icon-index-location: "\f1f4";
+  --oui-icon-index-lock: "\f1f5";
+  --oui-icon-index-minus: "\f1f6";
+  --oui-icon-index-ok: "\f1f7";
+  --oui-icon-index-ovh: "\f1f8";
+  --oui-icon-index-pause: "\f1f9";
+  --oui-icon-index-pen: "\f1fa";
+  --oui-icon-index-phone: "\f1fb";
+  --oui-icon-index-play: "\f1fc";
+  --oui-icon-index-plus: "\f1fd";
+  --oui-icon-index-printer: "\f1fe";
+  --oui-icon-index-refresh: "\f1ff";
+  --oui-icon-index-remove: "\f200";
+  --oui-icon-index-search: "\f201";
+  --oui-icon-index-settings: "\f202";
+  --oui-icon-index-shape-circle: "\f203";
+  --oui-icon-index-shape-dot: "\f204";
+  --oui-icon-index-sort-down: "\f205";
+  --oui-icon-index-sort-up: "\f206";
+  --oui-icon-index-sort: "\f207";
+  --oui-icon-index-success-circle: "\f208";
+  --oui-icon-index-success: "\f209";
+  --oui-icon-index-time: "\f20a";
+  --oui-icon-index-transfer: "\f20b";
+  --oui-icon-index-trash: "\f20c";
+  --oui-icon-index-triangle-down: "\f20d";
+  --oui-icon-index-triangle-left: "\f20e";
+  --oui-icon-index-triangle-right: "\f20f";
+  --oui-icon-index-triangle-up: "\f210";
+  --oui-icon-index-truck: "\f211";
+  --oui-icon-index-user: "\f212";
+  --oui-icon-index-warning-circle: "\f213";
+  --oui-icon-index-warning: "\f214";
 }