select trailingIcon use icon

packages/actify/src/components/Select/TrailingIcon.tsx

@@ -1,23 +1,11 @@
+import { Icon } from '../Icon'
 import clsx from 'clsx'
 import styles from './trailingIcon.module.css'
 
 export const TrailingIcon = ({ isOpen }: { isOpen: boolean }) => {
   return (
-    <span className={styles['trailing-icon']}>
-      <svg height="5" viewBox="7 10 10 5" focusable="false">
-        <polygon
-          className={clsx(styles['down'], isOpen && styles['open'])}
-          stroke="none"
-          fillRule="evenodd"
-          points="7 10 12 15 17 10"
-        />
-        <polygon
-          className={clsx(styles['up'], isOpen && styles['open'])}
-          stroke="none"
-          fillRule="evenodd"
-          points="7 15 12 10 17 15"
-        />
-      </svg>
-    </span>
+    <Icon className={clsx(styles['trailing-icon'], isOpen && styles['open'])}>
+      Arrow_Drop_Down
+    </Icon>
   )
 }

packages/actify/src/components/Select/trailingIcon.module.css

@@ -1,19 +1,10 @@
 .trailing-icon {
+  height: 100%;
   display: inline-flex;
+  align-items: center;
   margin-inline: var(--_content-space)
     var(--_with-trailing-content-trailing-space);
 }
-
-.trailing-icon svg {
-  fill: currentColor;
-}
-
-.up,
-.open.down {
-  opacity: 0;
-  transition: opacity 75ms linear 75ms;
-}
-
-.open.up {
-  opacity: 1;
+.open {
+  rotate: 180deg;
 }