templarian/materialdesign-angular-material

@mdi/angular-material Dist for Material Design Icons.

Hi, I am Austin

Probably working on icons or something related to icons. If you're ever in Chicago feel free to reach out for tea 🍵 / beer 🍺.

Co-run Pictogrammers with some amazing designers and developers.

Topics I Enjoy

• ✒ Icons (obviously)
• 🧩 Web Components
• 📃 TypeScript
• 📄 Documentation
• 🤔 Unit Testing!

Contact me on Mastodon @templarian. Unless it's about something I maintain, then maybe create an issue 😉.

materialdesign-angular-material's Issues

[3.5.94] Bad path for svg icons in mdi.svg

With the last version (3.5.94), the mdi.svg file seems have a problem with the path tag :
<svg><defs><svg id="access-point-network-off"><path d="mdi-access-point-network-off"/></svg>...
instead of
<svg><defs><svg id="access-point-network-off"><path d="M14.83,13.83C15.55,13.11 16,12.11 16,11C16,9.89 15.55,8.89 14.83,8.17L16.24,6.76C17.33,7.85 18,9.35 18,11C18,12.65 17.33,14.15 16.24,15.24L14.83,13.83M14,11C14,9.9 13.1,9 12,9C11.4,9 10.87,9.27 10.5,9.68L13.32,12.5C13.73,12.13 14,11.6 14,11M17.66,16.66L19.07,18.07C20.88,16.26 22,13.76 22,11C22,8.24 20.88,5.74 19.07,3.93L17.66,5.34C19.11,6.78 20,8.79 20,11C20,13.22 19.11,15.22 17.66,16.66M22,21.18V20H20.82L22,21.18M20.27,22L21,22.73L19.73,24L17.73,22H15C15,22.55 14.55,23 14,23H10C9.45,23 9,22.55 9,22H2V20H9C9,19.45 9.45,19 10,19H11V15.27L8.34,12.61C8.54,13.07 8.82,13.5 9.17,13.83L7.76,15.24C6.67,14.15 6,12.65 6,11C6,10.77 6,10.54 6.04,10.31L4.37,8.64C4.14,9.39 4,10.18 4,11C4,13.22 4.89,15.22 6.34,16.66L4.93,18.07C3.12,16.26 2,13.76 2,11C2,9.61 2.29,8.28 2.81,7.08L1,5.27L2.28,4L3.7,5.42L5.15,6.87L6.63,8.35V8.35L8.17,9.9L10.28,12L11,12.71L18.27,20H18.28L20.28,22H20.27M15.73,20L13,17.27V19H14C14.55,19 15,19.45 15,20H15.73Z"/></svg>...
in previous versions.
This break all custom icons provided by the MDI :)

New release?

We use the NPM package, but since this is two major versions behind with the material design icons, I was wondering whether this is no longer recommended?

svg tag vs g tag?

In the Angular Material example, they are using <svg> tags within the SVG <defs> tag:

https://github.com/angular/material2/blob/7f8fd9fc06bf6e49162cc144d44fc4261e11a4e8/src/demo-app/icon/icon-demo.ts#L48-L67

EDIT: Here's the code as shown above:

const INLINE_ICON_SET = `
  <svg>
    <defs>
    <svg id="account-balance">
      <path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-` +
        `7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/>
    </svg>
    <svg id="account-balance-wallet">
      <path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-` +
        `2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9` +
        `-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
      />
    </svg>
    <svg id="account-box">
      <path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H` +
        `5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-` +
        `3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/>
    </svg>
    </defs>
  </svg>
`;

However, by default, MDI is compiled with the <g> tag:

<svg>
  <defs>
    <g id="...">
      ...
    </g>
  </defs>
</svg>

In your opinion, which feels better? <svg>, or <g>?