better icons

vocodes/src/v2/view/_icons/FileAudioIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFileAudio } from '@fortawesome/free-solid-svg-icons'
+
+interface Props {
+  title?: string,
+}
+
+export function FileAudioIcon(props: Props) {
+  return (
+      <FontAwesomeIcon icon={faFileAudio} title={props.title} />
+  );
+}
+

vocodes/src/v2/view/_icons/FilmIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFilm } from '@fortawesome/free-solid-svg-icons'
+
+interface Props {
+  title?: string,
+}
+
+export function FilmIcon(props: Props) {
+  return (
+      <FontAwesomeIcon icon={faFilm} title={props.title} />
+  );
+}
+

vocodes/src/v2/view/_icons/PlayCircleIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlayCircle } from '@fortawesome/free-solid-svg-icons'
+
+interface Props {
+  title?: string,
+}
+
+export function PlayCircleIcon(props: Props) {
+  return (
+      <FontAwesomeIcon icon={faPlayCircle} title={props.title} />
+  );
+}
+

vocodes/src/v2/view/_icons/VolumeUpIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faVolumeUp } from '@fortawesome/free-solid-svg-icons'
+
+interface Props {
+  title?: string,
+}
+
+export function VolumeUpIcon(props: Props) {
+  return (
+      <FontAwesomeIcon icon={faVolumeUp} title={props.title} />
+  );
+}
+

vocodes/src/v2/view/profile/profile_view/Profile_TtsInferenceResultListFc.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { formatDistance } from 'date-fns';
 import { VisibleIconFc } from '../../_icons/VisibleIcon';
 import { HiddenIconFc } from '../../_icons/HiddenIcon';
+import { PlayCircleIcon } from '../../_icons/PlayCircleIcon';
 
 interface TtsInferenceResultListResponsePayload {
   success: boolean,
@@ -109,7 +110,12 @@ function ProfileTtsInferenceResultsListFc(props: Props) {
         <td>{result.maybe_creator_result_id}</td>
         <td>{visibilityIcon}</td>
         <th className="overflow-fix">
-          <Link to={inferenceLink}><span role="img" aria-label="result link">▶️</span> {text}</Link>
+
+          <Link to={inferenceLink}>
+            <PlayCircleIcon title="play" />
+            &nbsp;
+            {text}
+          </Link>
           &nbsp;
         </th>
         <th><Link to={modelLink}>Model: {result.tts_model_title}</Link></th>

vocodes/src/v2/view/profile/profile_view/Profile_W2lInferenceResultListFc.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { formatDistance } from 'date-fns'
 import { VisibleIconFc } from '../../_icons/VisibleIcon';
 import { HiddenIconFc } from '../../_icons/HiddenIcon';
+import { FilmIcon } from '../../_icons/FilmIcon';
 
 interface W2lInferenceResultListResponsePayload {
   success: boolean,
@@ -109,7 +110,13 @@ function ProfileW2lInferenceResultsListFc(props: Props) {
       <tr key={result.w2l_result_token}>
         <td>{result.maybe_creator_result_id}</td>
         <td>{visibilityIcon}</td>
-          <th><Link to={inferenceLink}><span role="img" aria-label="result link">▶️</span> Result</Link></th>
+        <th>
+          <Link to={inferenceLink}>
+            <FilmIcon title="Play &amp; Download" />
+            &nbsp;
+            Result
+          </Link>
+        </th>
         <th><Link to={templateLink}>{templateTitle}</Link></th>
         <td>(custom audio)</td>
         <td>{duration_seconds} s</td>