On TextColumn using an HTML ->prefix() with <svg> results in the svg being stripped from the output

I am trying to add an icon with a link as a prefix to my table. I can add text no problem but the <svg> tag seems to be stripped. Any idea why and how to resolve? Code looks like this:

Tables\Columns\TextColumn::make('name')
                    ->label('Domain Name')
                    ->prefix(function (): ?HtmlString {
                        return new HtmlString(view('components.external-link-button', [])->render());
                    })

Tables\Columns\TextColumn::make('name')
                    ->label('Domain Name')
                    ->prefix(function (): ?HtmlString {
                        return new HtmlString(view('components.external-link-button', [])->render());
                    })

the blade component looks like this (just for testing):

<p class="text-2xl">
    foobar
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</p>

<p class="text-2xl">
    foobar
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</p>

and I can see that the p class along with "foobar" is rendered but the svg code is completely strippped. Any ideas why?

Filament•3y ago•

2 replies

On TextColumn using an HTML ->prefix() with <svg> results in the svg being stripped from the output

I am trying to add an icon with a link as a prefix to my table. I can add text no problem but the <svg> tag seems to be stripped. Any idea why and how to resolve? Code looks like this:

Tables\Columns\TextColumn::make('name')
                    ->label('Domain Name')
                    ->prefix(function (): ?HtmlString {
                        return new HtmlString(view('components.external-link-button', [])->render());
                    })

Tables\Columns\TextColumn::make('name')
                    ->label('Domain Name')
                    ->prefix(function (): ?HtmlString {
                        return new HtmlString(view('components.external-link-button', [])->render());
                    })

the blade component looks like this (just for testing):

<p class="text-2xl">
    foobar
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</p>

<p class="text-2xl">
    foobar
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</p>

and I can see that the p class along with "foobar" is rendered but the svg code is completely strippped. Any ideas why?

On TextColumn using an HTML ->prefix() with <svg> results in the svg being stripped from the output

Similar Threads

On TextColumn using an HTML ->prefix() with <svg> results in the svg being stripped from the output

Similar Threads

Similar Threads

Similar Threads