score:0

same problem here, this is what i did.

import linkicon from '@material-ui/icons/link';
import styled from 'styled-components';
...
const resolve = styled.div`
  display: flex;
  vertical-align: middle,
`;

<resolve>
  <linkicon style={{ marginright: '5px' }} />
  <p>resolve</p>
</resolve>

if you aren't happy with mui default link icon you can always diy:

{/* this is the same chained icon used in the own material-ui, 
idk why this ins't avaiable yet */}

function customlinkicon(props) {
  return (
    <svgicon {...props}>
      <path d="m4 9h1v1h4c-1.5 0-3-1.69-3-3.5s2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25v8.59c.58-.45 1-1.27 1-2.09c10 5.22 8.98 4 8 4h4c-.98 0-2 1.22-2 2.5s3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5s13.98 12 13 12h9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09v6.25c-1.09.53-2 1.84-2 3.25c6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5s14.5 6 13 6z" />
    </svgicon>
  );
}
...
<resolve>
  <customlinkicon 
     {/* adjust margin top if needed */}
     style={{ marginright: '3px', margintop: '3px' }} {
  />
  <p>resolve</p>
</resolve>

score:0

the best option is to use it like that :

  import {box, typography} from '@material-ui/core'
  import linkicon from '@material-ui/icons/linkicon';

   ........

   <box display='flex' alignitems='center'>
       <linkicon classname={classes.linkicon}  />
       <typography variant='h5'>
          resolve
       </typography>
    </box>

score:0

with this solution the icon will inherit your typography, it prevents having to re-write the style when changin

<typography component={stack} direction="row" alignitems="center" color="secondary">
     <editicon fontsize="inherit" sx={{ marginright: 1 }} />
     edit
</typography>

score:3

you can import these on top

import { grid, typography } from "@material-ui/core";
import linkicon from "@material-ui/icons/link";

you can use

<grid style={{ display: "flex" }}>
    <linkicon />
    <typography>revolve</typography>
</grid>

sample sandbox example here

score:4

having listitemicon and listitemtext wrapped inside a listitem will keep it in one line and prevent breaking:

import listitem from '@material-ui/core/listitem';
import listitemicon from '@material-ui/core/listitemicon';
import listitemtext from '@material-ui/core/listitemtext';
    
<listitem >
  <listitemicon><accessalarmicon color="secondary" /></listitemicon>
  <listitemtext>updated 1 hour ago</listitemtext>
</listitem>

demo image:

demo image

score:4

you can also use material ui's flexbox component.

for example:

// ...
import { box } from '@material-ui/core';
// ...

<box alignitems="center" display="flex">
 <box>
    <linkicon classname={classes.linkicon}  />
 </box>
 <box>
    revolve
 </box>
</box>

the alignitems: center attribute will vertically align the inner items.

this will add some additional markup. however, if you look at the component's api there's a lot of additional flexibility. such as for example a method to use margin or padding that's consistent with the rest of your material ui implementation. also it's really easy to align the items differently if the use-case should occur.

score:6

styles

const styles = theme => ({
    icon: {
        position: "relative",
        top: theme.spacing.unit,
        width: theme.typography.display1.fontsize,
        height: theme.typography.display1.fontsize
    }
});

jsx

<typography variant="display1">
    <icon classname={this.props.classes.icon}/>your&nbsp;text
</typography>

you could replace display1 with display3 or another typography variant in all 3 places to choose your text size. the &nbsp; ensures that your text doesn't break between words when it wraps.

for me this can render to look like this

enter image description here

with display3 and a few other styles added for color.

score:11

this can be easily achieved in mui v5 by using a stack and set alignitems prop to center:

import stack from '@mui/material/stack';
import typography from '@mui/material/typography';
import addcircleicon from '@mui/icons-material/addcircle';
<stack direction="row" alignitems="center" gap={1}>
  <addcircleicon />
  <typography variant="body1">text</typography>
</stack>

codesandbox demo

score:18

alternative simple solution

<grid container direction="row" alignitems="center">
     <searchicon /> example
</grid>

score:29

try the below code. you can use variant as per your requirement.

const usestyles = makestyles(theme => ({
  wrapicon: {
    verticalalign: 'middle',
    display: 'inline-flex'
   }
}));

<typography variant="subtitle1" classname={classes.wrapicon}>
    <linkicon classname={classes.linkicon}  /> revolve
</typography>

score:43

you need to use grid. something like that should works:

<grid container direction="row" alignitems="center">
  <grid item>
    <linkicon classname={classes.linkicon} />
  </grid>
  <grid item>
    revolve
  </grid>
</grid>

score:87

this works perfectly!

<div style={{
    display: 'flex',
    alignitems: 'center',
    flexwrap: 'wrap',
}}>
    <linkicon />
    <span>revolve</span>
</div>  

Related Query

More Query from same tag