CODEWITHSUNDEEP
svgiconsmaterial-designmaterial-ui
Kyle Pennell
Kyle Pennell

Reputation: 6117

How to add an outline/stroke around a material-ui icon?

How to add a color outline around the material-ui icons? Have this

enter image description here

Look more like this?

enter image description here

I've tried stroke and webkit-stroke and no luck on anything. It put a border around the whole invisible box.

Upvotes: 5

Views: 8213

Answers (1)

Andrea De Luisi
Andrea De Luisi

Reputation: 127

Using Material-UI with React the way to go, in theory, should be setting the property stroke and stroke-width directly to the imported heart icon. But as you said, it will create an awkward border around the whole svg tag. Then, you should be able to extract the definition of the heart from the dom and use the more general SvgIcon component Material-UI provides.

So, to reach your goal, instead of:

import { Favorite } from '@material-ui/icons';
export default () => <Favorite stroke={"white"} stroke-width={1}/>

I would go for: 

import SvgIcon from '@material-ui/core/SvgIcon';
export default () => (
  <SvgIcon>
    <path
      d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      stroke="white"
      strokeWidth={1}
    />
  </SvgIcon>
);

Upvotes: 5

Related Questions