CODEWITHSUNDEEP
angularsvgangular-fontawesome
Kishor Pawar
Kishor Pawar

Reputation: 3526

Custom FontAwesome icon doesn't render

UPDATE :

Here is the StackBlitz as requested.

I created an SVG icon based on FontAwesome's collaborator's instructions here, but that doesn't seem to render in HTML. Though it shows the exact element tree as FontAwesome's own icons.

So I created an Icon like following in tiktok.ts in the assets/icons/

import { IconDefinition } from '@fortawesome/fontawesome-svg-core';

export const faTiktok: IconDefinition = {
    prefix: 'fab',
    iconName: 'tiktok',
    icon: [
        512,
        512,
        [],
        'U+E002',
        'M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'
    ],
} as any

and imported in component.ts like

import { faTiktok } from 'assets/icons/tiktok';

assigned it variable in component.ts

and used in the HTML as

<fa-icon [icon]="faTiktok" matSuffix size='2x'></fa-icon>

All this shows the same element tree as other FontAwesome icons but doesn't render on page.

I tested the path online and that renders the icon correctly.

Any idea what I could have missed?

Upvotes: 1

Views: 625

Answers (1)

Yaroslav Admin
Yaroslav Admin

Reputation: 14535

The problem is that you have specified dimension of your SVG view box incorrectly. Your icon is rendered, it is just of a sub-pixel size and therefore you can't see it.

To fix the problem set correct view box dimensions in the icon definition (looks like it is 24x24 for this particular icon):

export const faTiktok: IconDefinition = {
    prefix: 'fab',
    iconName: 'tiktok',
    icon: [
        24,
        24,
        [],
        'U+E002',
        'M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'
    ],
} as any

See StackBlitz for working example.

Upvotes: 2

Related Questions