[Tabs] Leading Icon variant

[numToStr]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Currently <Tab /> does not support the leading icon. This variant is useful for desktop screens as there is plenty of horizontal space is available.

Examples 🌈

https://material.io/components/tabs

Current Solution

I was able to achieve similar result. But I don't like that.

<Tab
    key={t.value}
    disableRipple
    label={t.label}
    value={t.value}
    component={({ children, ...p }) => (
        <Box {...p}>
            <Box sx={{ mr: 1, lineHeight: 0 }}>
                <EditIcon fontSize="small" />
            </Box>
            {children}
        </Box>
    )}
/>

[oliviertassinari]

Related to #15324

[jiazhengxing]

I have a question about the introduction of custom svg in tabs, and switch tabs, but the icon color does not change. How to solve this problem?

eg：
import SvgIcon from "@material-ui/core/SvgIcon";
import { ReactComponent as Cash } from "./cash.svg";
import PhoneIcon from "@material-ui/icons/Phone";
import FavoriteIcon from "@material-ui/icons/Favorite";
const CashIconCom= () => (



);

<Tab icon={} aria-label="phone" />
<Tab icon={} aria-label="favorite" />
<Tab icon={} aria-label="person" />
<Tab icon={} aria-label="personIcon" />

cash.svg file:

[oliviertassinari]

Duplicate of #11653