Icons are cutted off in Chrome (only on OSX) - html

Question

I have a problem with my custom iconfont in Google Chrome, only on Mac. They are cutted off at the edge. I already tried to
use greater svg's and
prefer the SVG (before woff)
play with css settings
You can see it live at kuyichi.com (if you have Chrome and OSX)
The icons don't have a border, the roundings are with the icons itself.
Is there anybody how to fix this?
live view:
http://i.stack.imgur.com/niqcP.png
the iconpack on icomoon:
http://i.stack.imgur.com/PwyCm.png
#font-face {
font-family: 'iconfont';
src:url('fonts/iconfont.eot?nr90fm');
src:url('fonts/iconfont.eot?#iefixnr90fm') format('embedded-opentype'),
url('fonts/iconfont.woff?nr90fm') format('woff'),
url('fonts/iconfont.ttf?nr90fm') format('truetype'),
url('fonts/iconfont.svg?nr90fm#iconfont') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icons-"], [class*=" icons-"] {
font-family: 'iconfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icons-knit:before {
content: "\e628";
}

Answer 1

Try adding size information to your icon delcaration:
.icons-knit:before {
content: "\e628";
width:40px;
height:40px;
font-size:20px;
}