Some icons render incorrectly in @hugeicons/angular (missing inner details)

[RandAldurayhim]

🐞 Bug description

Some icons from Hugeicons render differently in @hugeicons/angular compared to the official website.

Inner details/shapes are missing in Angular, while they appear correctly on hugeicons.com.

❗ Affected icons

• MapsLocation01 → missing inner dot inside the location pin
• AlertCircle → missing bottom dots and outer circle

✅ Expected behavior

Icons should render exactly as shown on the Hugeicons website.

❌ Actual behavior

Some SVG paths/details are missing when using the Angular package.

---

📸 Visual comparison

---

📦 Environment

Package: @hugeicons/angular
Version: 1.0.6
Icon package: @hugeicons/core-free-icons 3.1.1
Framework: Angular 17.3.12
TypeScript: 5.4.2
Browser: Chrome

---

Thanks for the great icon library! 🙏

[joggeli34]

Actually, it happens on all icons that have not only "path" objects but also "circle" or "ellipse"

[kstepien3]

I’ve found a fix for this. I’ll make PR tomorrow

[joggeli34]

We currently use our own component, feel free to reuse it:

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
} from '@angular/core';

/** SVG attributes */
export interface SvgElementAttributes {
  type?: string;

  /** Common attributes */
  fill?: string;
  opacity?: string;
  fillRule?: 'nonzero' | 'evenodd';
  stroke?: string;
  strokeWidth?: number | string;
  strokeLinecap?: 'butt' | 'round' | 'square';
  strokeLinejoin?: 'miter' | 'round' | 'bevel';

  /** Path specific attributes */
  d?: string;

  /** Circle / Ellipse specific attributes */
  cx?: string;
  cy?: string;
  r?: string;
  rx?: string;
  ry?: string;
}

/** Icon SVG object type */
export type IconSvgObject = readonly (readonly [
  string,
  SvgElementAttributes,
])[];

@Component({
  selector: 'lib-hugeicons',
  template: `
    <svg
      [attr.width]="size()"
      [attr.height]="size()"
      viewBox="0 0 24 24"
      fill="none"
      [attr.color]="color()"
      [class]="className()"
      xmlns="http://www.w3.org/2000/svg"
    >
      @for (path of elements(); track $index) {
        @if (path.type === 'circle') {
          <circle
            [attr.cx]="path.cx"
            [attr.cy]="path.cy"
            [attr.r]="path.r"
            [attr.fill]="path.fill"
            [attr.opacity]="path.opacity"
            [attr.fill-rule]="path.fillRule"
            [attr.stroke]="path.stroke"
            [attr.stroke-width]="path.strokeWidth"
            [attr.stroke-linecap]="path.strokeLinecap"
            [attr.stroke-linejoin]="path.strokeLinejoin"
          />
        } @else if (path.type === 'ellipse') {
          <ellipse
            [attr.cx]="path.cx"
            [attr.cy]="path.cy"
            [attr.rx]="path.rx"
            [attr.ry]="path.ry"
            [attr.fill]="path.fill"
            [attr.opacity]="path.opacity"
            [attr.fill-rule]="path.fillRule"
            [attr.stroke]="path.stroke"
            [attr.stroke-width]="path.strokeWidth"
            [attr.stroke-linecap]="path.strokeLinecap"
            [attr.stroke-linejoin]="path.strokeLinejoin"
          />
        } @else if (path.type === 'path') {
          <path
            [attr.d]="path.d"
            [attr.fill]="path.fill"
            [attr.opacity]="path.opacity"
            [attr.fill-rule]="path.fillRule"
            [attr.stroke]="path.stroke"
            [attr.stroke-width]="path.strokeWidth"
            [attr.stroke-linecap]="path.strokeLinecap"
            [attr.stroke-linejoin]="path.strokeLinejoin"
          />
        }
      }
    </svg>
  `,
  host: {
    style:
      'display: inline-flex; align-items: center; justify-content: center;',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HugeiconsComponent {
  public readonly size = input<string | number>(24);
  public readonly strokeWidth = input<number>();
  public readonly absoluteStrokeWidth = input<boolean>(false);
  public readonly icon = input.required<IconSvgObject>();
  public readonly altIcon = input<IconSvgObject>();
  public readonly color = input<string>('currentColor');
  public readonly className = input<string>('');
  public readonly showAlt = input<boolean>(false);

  protected readonly elements = computed<SvgElementAttributes[]>(() => {
    const currentIcon =
      this.showAlt() && this.altIcon() ? this.altIcon()! : this.icon();

    if (!currentIcon || !Array.isArray(currentIcon)) {
      return [];
    }

    return currentIcon.map(
      ([type, attrs]: readonly [string, SvgElementAttributes]) => ({
        type,
        ...attrs,
        ...this.strokeOverride(),
      }),
    );
  });

  private readonly strokeOverride = computed(() => {
    const strokeWidthValue = this.strokeWidth();
    if (strokeWidthValue !== undefined) {
      return {
        strokeWidth: this.absoluteStrokeWidth()
          ? (Number(strokeWidthValue) * 24) / Number(this.size())
          : strokeWidthValue,
      };
    } else {
      return {};
    }
  });
}

[kstepien3]

Hey @joggeli34, I also use my own component.

Your code has missing shapes like rect, line, polyline, and polygon.

Here’s my version. Check this out:

import {
  booleanAttribute,
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  input,
  isDevMode,
} from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import * as icons from '@hugeicons/core-free-icons';

type IconName = keyof typeof icons;

/**
 * A reusable Angular component for rendering icons from the Hugeicons library.
 *
 * This component renders an SVG icon from the `@hugeicons/core-free-icons` collection by name.
 * The size, stroke width, and color are configurable through inputs. It dynamically generates the SVG
 * and its paths, providing a flexible and efficient way to use Hugeicons in an Angular application.
 *
 * @example
 * <zen-icon icon="Tree02Icon" />
 *
 * @see [Hugeicons](https://hugeicons.com)
 */
@Component({
  selector: 'zen-icon',
  template: `
    <svg
      [attr.height]="size()"
      [attr.stroke-width]="calculatedStrokeWidth()"
      [attr.viewBox]="'0 0 ' + BASE_SIZE + ' ' + BASE_SIZE"
      [attr.width]="size()"
      [innerHTML]="safeSvgContent()"
      [style.color]="color()"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      xmlns="http://www.w3.org/2000/svg"
    ></svg>
  `,
  styles: [':host { display: inline-flex; }'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZenIcon {
  /** Icon file names from HugeIcons */
  readonly icon = input.required({ transform: this.resolveIconData });
  /** Size of the icon in pixels. */
  readonly size = input<number>(24);
  /** Determines if stroke width scales with icon size. */
  readonly absoluteStrokeWidth = input<boolean, unknown>(false, { transform: booleanAttribute });
  /** Width of the stroke for icon paths. */
  readonly strokeWidth = input<number>(1.5);
  /** Color of the icon. */
  readonly color = input<string>('currentColor');

  protected readonly BASE_SIZE = 24;

  private readonly sanitizer = inject(DomSanitizer);

  protected readonly calculatedStrokeWidth = computed(() => {
    if (!this.absoluteStrokeWidth()) return this.strokeWidth();
    return (this.strokeWidth() * this.BASE_SIZE) / this.size();
  });

  /** Converts icon data into a sanitized HTML string of SVG elements. */
  protected readonly safeSvgContent = computed<SafeHtml>(() => {
    const iconData = this.icon();
    if (!Array.isArray(iconData)) {
      if (isDevMode()) {
        throw new Error(`[ZenIcon] Icon data not found. Check if the icon name is correct.`);
      }
      return '';
    }

    const htmlString = iconData.map(([tag, attrs]) => this.buildTag(tag, attrs)).join('');

    return this.sanitizer.bypassSecurityTrustHtml(htmlString);
  });

  /** Validates the existence of the icon and returns its data, throwing in dev mode if missing. */
  private resolveIconData(name: IconName) {
    const data = icons[name];
    if (!data && isDevMode()) {
      throw new Error(`[ZenIcon] Icon "${name}" not found in @hugeicons/core-free-icons.`);
    }
    return data;
  }

  /** Generates a single SVG element string (e.g., <path ...>) with its mapped attributes. */
  private buildTag(tag: string, attrs: Record<string, string | number>): string {
    const attributes = Object.entries(attrs)
      .filter(([key]) => !['strokeWidth', 'stroke-width'].includes(key))
      .map(([key, value]) => `${this.toKebabCase(key)}="${value}"`)
      .join(' ');

    return `<${tag} ${attributes} stroke-width="${this.calculatedStrokeWidth()}"></${tag}>`;
  }

  /** Formats attribute names from camelCase (used in JS library) to a kebab-case for SVG compatibility. */
  private toKebabCase(str: string): string {
    return str.replaceAll(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
  }
}

What do you think? This code might support other Icon libraries too.