I'm trying to design with Figma my own icon set and I'm creating an icon font using icomoon. I noticed that on some icon the lines are like intersected when it's rendered on the web as a font. The issue doesn't appear when I use the icon as SVG.
I attached the link that shows my issue. https://paste.pics/3e2e01b6e6181e684a67956f35c731fe
Is someone has any idea if it needs to be fixed with CSS or need to be exported in another way?
Thank you (:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<g class="email">
<path fill="#333" fill-rule="evenodd" d="M2 8a3 3 0 013-3h14a3 3 0 013 3v8a3 3 0 01-3 3H5a3 3 0 01-3-3V8zm3-1a1 1 0 00-1 1v8a1 1 0 001 1h14a1 1 0 001-1V8a1 1 0 00-1-1H5z" class="ob-2 (Stroke)" clip-rule="evenodd"/>
<path fill="#333" fill-rule="evenodd" d="M11.427 13.82a1 1 0 001.146 0l8.574-6A1 1 0 0020 6.18l-8 5.6-8-5.6a1 1 0 00-1.147 1.64l8.574 6z" class="ob-1 (Stroke)" clip-rule="evenodd"/>
</g>
</svg>