M12 16l-6-6h12z representa tu triángulo y significa

1. mover al punto con coordenadas 12 16
2. luego dibuje la línea a -6 -6 (relativamente al punto actual)
3. luego dibuja la línea horizontal con la longitud igual a 12 entonces
4. ir al primer punto

Y obtienes tu icono como resultado.

Hay varias formas de ajustar la ruta, pero debe comprender cómo funciona una path . Puedes leer sobre esto aquí .

Y ver ejemplos a continuación

Primera forma de encajar:

 svg { border: 1px solid red; }

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#red"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M 12 24 l -12 -24 h24 z"></path> </svg>

Segundo:

 svg { border: 1px solid red; }

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#red"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M 12 12 l -12 -12 h24 z"></path> </svg>

Puede ver en el SVG que el width y la height están configurados actualmente en 24. Un buen comienzo sería establecer el ancho y la altura en 1em para que coincida mejor con el tamaño de la fuente. Vea el primer ejemplo en la demostración a continuación.

Si siente que el triángulo es demasiado pequeño ahora, puede hacer que parezca más grande ajustando viewBox . De momento tiene bastante acolchado alrededor. Para reducir ese relleno, aumente viewBox x e y (los primeros dos números) y reduzca el width y la height (los segundos dos números. En el segundo ejemplo a continuación, he reducido el relleno en 3 unidades alrededor del ícono al aumentar la x y y por 3, y reduciendo el width y height , por 2 * 3 correspondientemente.

El ícono ahora es más grande en comparación con el texto, pero ahora puede parecer un poco alto. Hay algunas maneras de ajustar eso. Incluyendo lo siguiente:

• Use position: relative y la top: 2px para empujar el <svg> un poco hacia abajo.
• Reduzca el tamaño del ícono a algo así como 0.7em , para que el ícono coincida mejor con la altura X de la fuente, en lugar de la altura Em completa.
• Utilice una configuración diferente vertical-align para ajustar la posición del icono en relación con el resto de la línea. En el ejemplo 3 a continuación, configuré el ícono para vertical-align: text-top .
• Empuje el icono hacia abajo en viewBox aumentando el relleno en la parte superior de viewBox. En el ejemplo 4 a continuación, reduje viewBox y (segundo número) para aumentar el relleno superior.

 body { background-color: dodgerblue; } div { font: 16px sans-serif; color: white; } svg { width: 1em; height: 1em; }

 <div> Show <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#fff"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M12 16l-6-6h12z"></path> </svg> </div> <div> Show <svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18" width="24" height="24" fill="#fff"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M12 16l-6-6h12z"></path> </svg> </div> <div> Show <svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18" width="24" height="24" fill="#fff" style="vertical-align: text-top"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M12 16l-6-6h12z"></path> </svg> </div> <div> Show <svg xmlns="http://www.w3.org/2000/svg" viewBox="3 1 18 18" width="24" height="24" fill="#fff"> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M12 16l-6-6h12z"></path> </svg> </div>