SVG: crea líneas superpuestas en un elemento visible

Estoy creando un blog y me gustaría tener una línea de íconos de redes sociales inmediatamente debajo del título. Lo he logrado de alguna manera usando FontAwesome .

Sin embargo, me gustaría incluir algunos íconos que no están presentes en el kit de herramientas. Me di cuenta de que podía diseñar mi propio icono como un SVG y crear una fuente personalizada con la aplicación Icomoon . Sin embargo, tengo problemas para implementar esto, como se explica en la pregunta SO relacionada .

Parece que mi SVG original es el problema y, a pesar de ser una sola capa en Inkscape, la aplicación Icomoon seleccionó <path>elementos individuales en el SVG. A partir de esto y del hecho de que todos los SVG sin procesar de FontAwesome parecen tener rutas únicas, concluyo que yo también necesito un <path>SVG de un solo elemento.

Este es el icono que estoy tratando de generar:

A mi modo de ver, hay tres formas superpuestas en la imagen; la escuadra, el bolsillo y la flecha. Para demostrar que tengo todas las formas aquí, cada una individualmente:

Luego arreglé las formas en un solo SVG así:

<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="
  M 1664 416
  v 960
  q 0 119-84.5 203.5
  t -203.5 84.5
  h -960
  q -119 0 -203.5 -84.5
  t -84.5-203.5v-960
  q 0 -119 84.5-203.5
  t 203.5 -84.5
  h 960
  q 119 0 203.5 84.5
  t 84.5 203.5
  z

  m 1322.122, 445.11577
  q 38.4213, 0 65.0205, 26.89486 26.5994, 26.89487 26.5994, 65.31612
  v 306.77881
  q 0,104.03295 -40.1945, 198.60834 -40.1946, 94.5752 -107.8751, 162.5513 -67.6805, 67.9761 -161.9603, 107.875 -94.2798, 39.899 -197.72163, 39.899 -104.03284,0 -198.3127,-39.899 -94.2798, -39.8989 -162.25584, -107.875 -67.97604, -67.9761 -108.17057, -162.5513 -40.19453, -94.57539 -40.19453, -198.60834
  V 537.32675
  q 0, -37.83015 27.19042, -65.02057 27.19041, -27.19041 65.02056, -27.19041
  z

  M 905.99037,1074.0419
  q 27.78153, 0 48.46995, -19.5062
  L 1193.2631, 825.19051
  q 21.8705, -20.68842 21.8705, -50.2432 0, -28.96366 -20.3928, -49.35651 -20.3928, -20.39277 -49.3565, -20.39277 -27.7815, 0 -48.4699, 19.50617
  L 905.99037, 907.94381 715.06637, 724.7042
  q -20.68836, -19.50617 -47.87878, -19.50617 -28.96369,
  0 -49.35651, 20.39277 -20.39281, 20.39285 -20.39281, 49.35651 0, 30.1459 21.27946, 50.2432
  l 239.39384, 229.34519
  q 19.50618,19.5062 47.8788,19.5062
  z"/></svg>

En última instancia, me gustaría que las formas fueran negras, blancas y negras, respectivamente, con el blanco como fondo, ya que la forma se recorta de las formas debajo de ella. Sin embargo, el aspecto real de este SVG es:

y las formas se ven negras, negras y blancas respectivamente.

Por lo tanto, las formas superpuestas pueden cambiar de negro a blanco (o recortadas), como también se ve en los SVG sin procesar de FontAwesome (por ejemplo , este ), pero en este caso no es la forma correcta.

¿Qué determina esto y cómo puedo lograr lo que busco?