Use a ☆ instead of the word "starred"

ui/src/album/AlbumSongs.js

@@ -6,12 +6,12 @@ import {
   ListToolbar,
   TextField,
   useListController,
-  useTranslate,
 } from 'react-admin'
 import classnames from 'classnames'
 import { useDispatch } from 'react-redux'
 import { Card, useMediaQuery } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
 import { playTracks } from '../audioplayer'
 import {
   DurationField,
@@ -46,6 +46,10 @@ const useStyles = makeStyles(
       flexWrap: 'wrap',
     },
     noResults: { padding: 20 },
+    columnIcon: {
+      marginLeft: '3px',
+      verticalAlign: 'text-top',
+    },
   }),
   { name: 'RaList' }
 )
@@ -66,7 +70,6 @@ const trackName = (r) => {
 
 const AlbumSongs = (props) => {
   const classes = useStyles(props)
-  const translate = useTranslate()
   const classesToolbar = useStylesListToolbar(props)
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
@@ -147,7 +150,14 @@ const AlbumSongs = (props) => {
               {isDesktop && <TextField source="artist" sortable={false} />}
               <DurationField source="duration" sortable={false} />
               <SongContextMenu
-                label={translate('resources.song.fields.starred')}
+                source={'starred'}
+                sortable={false}
+                label={
+                  <StarBorderIcon
+                    fontSize={'small'}
+                    className={classes.columnIcon}
+                  />
+                }
               />
             </SongDatagrid>
           )}

ui/src/common/SongContextMenu.js

@@ -96,7 +96,11 @@ const SongContextMenu = ({ record, showStar, onAddToPlaylist, visible }) => {
           disabled={updating}
           className={classes.star}
         >
-          {record.starred ? <StarIcon /> : <StarBorderIcon />}
+          {record.starred ? (
+            <StarIcon fontSize={'small'} />
+          ) : (
+            <StarBorderIcon fontSize={'small'} />
+          )}
         </IconButton>
       )}
       <IconButton

ui/src/common/SongDatagrid.js

@@ -58,7 +58,6 @@ export const SongDatagridRow = ({
               ? child
               : cloneElement(child, {
                   visible: contextVisible || visible,
-                  ...child.props,
                   ...rest,
                 }))
         )}

ui/src/song/SongList.js

@@ -5,9 +5,11 @@ import {
   NumberField,
   SearchInput,
   TextField,
-  useTranslate,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
+import StarIcon from '@material-ui/icons/Star'
 import {
   DurationField,
   List,
@@ -22,16 +24,27 @@ import { setTrack } from '../audioplayer'
 import { SongBulkActions } from './SongBulkActions'
 import { AlbumLinkField } from './AlbumLinkField'
 
+const useStyles = makeStyles({
+  columnIcon: {
+    marginLeft: '3px',
+    verticalAlign: 'text-top',
+  },
+})
+
 const SongFilter = (props) => (
   <Filter {...props}>
     <SearchInput source="title" alwaysOn />
-    <QuickFilter source="starred" defaultValue={true} />
+    <QuickFilter
+      source="starred"
+      label={<StarIcon fontSize={'small'} />}
+      defaultValue={true}
+    />
   </Filter>
 )
 
 const SongList = (props) => {
+  const classes = useStyles()
   const dispatch = useDispatch()
-  const translate = useTranslate()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   return (
@@ -73,7 +86,12 @@ const SongList = (props) => {
           {isDesktop ? (
             <SongContextMenu
               source={'starred'}
-              label={translate('resources.song.fields.starred')}
+              label={
+                <StarBorderIcon
+                  fontSize={'small'}
+                  className={classes.columnIcon}
+                />
+              }
               sortBy={'starred DESC, starredAt ASC'}
             />
           ) : (