Icon not showing on selects

[Britishexchangestudent]

Icons aren't showing on my selects, do i need to install something else? All icons are showing with the label

Icons on button is fine

[mkocansey]

Hey @Britishexchangestudent please paste the code that creates the select you showed above. Preferably the code from the browser's inspect element

[mkocansey]

In the meantime can you Check your project root > public > vendor > bladewind > icons > outline > magnifying-glass.svg for the file.

[Britishexchangestudent]

`

                    <div class="input_66e1982d9f8ae-suffix suffix text-sm select-none pl-3.5 !pr-3 rtl:!right-[unset] rtl:!left-0 z-20 text-blue-900/50 dark:text-dark-400 absolute right-0 inset-y-0 inline-flex items-center " data-transparency="1">
                        magnifying-glass
                </div>
    <script>positionSuffix('input_66e1982d9f8ae');</script>
</div>`

[Britishexchangestudent]

yes the icons are there

[Britishexchangestudent]

       class="!border-0 !border-b !rounded-none focus:!border-slate-300 dark:focus:!border-slate-600 !w-full !text-sm bw_search"
            add_clearing="false" placeholder="Type here..."
            suffix='<svg xmlns="http://www.w3.org/2000/svg"
            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
            </svg>'
            suffix_is_icon='true' />

            This seems to work, had to add the svg directly instead of 'magnifying-glass'

[haugen86]

Can this have something to do with https://bladewindui.com/laravel8-users?

[Britishexchangestudent]

Can this has something to do with https://bladewindui.com/laravel8-users?

Tried it both ways and still same result if i leave it as 'magnifying-glass' but with the svg itself it works

[mkocansey]

Strange happenings. I am unable to replicate this issue. @Britishexchangestudent can you change line 206 of project root > vendor > mkocansey > bladewind > resources > views > components > select.blade.php from suffix="magnifying-glass" to suffix="link". Let's see if any other icon will show.

Also, can you create an input with a suffix icon, let's see if it shows.

<x-bladewind::input name="space" placeholder="workspace-name" suffix="key" suffix_is_icon="true" />

[Britishexchangestudent]

Strange happenings. I am unable to replicate this issue. @Britishexchangestudent can you change line 206 of project root > vendor > mkocansey > bladewind > resources > views > components > select.blade.php from suffix="magnifying-glass" to suffix="link". Let's see if any other icon will show.

Also, can you create an input with a suffix icon, let's see if it shows.

<x-bladewind::input name="space" placeholder="workspace-name" suffix="key" suffix_is_icon="true" />

added that to the code and the icon does not show:

[Britishexchangestudent]

When i've merged my branch into master the icon fails to show up again even though the changes are present in the vendor file, do i need to run php artisan vendor:publish --tag=bladewind-public --force to see the changes?

On master

On Dev branch:

[mkocansey]

Yes. You need to run vendor:publish to move files from the vendor directory to your projects public directory

[mkocansey]

Yes. You need to run vendor:publish to move files from the vendor directory to your projects public directory

@Britishexchangestudent did vendor:publish solve your issue?

[Britishexchangestudent]

Yes. You need to run vendor:publish to move files from the vendor directory to your projects public directory

@Britishexchangestudent did vendor:publish solve your issue?

Nope, only things that seem to change it is using the actual svg instead of the name of the icon and/or changing suffix_is_icon and suffixIconType to true on line 65 in input.blade.php.

[Britishexchangestudent]

When i try to debug it, it seems suffix_is_icon isn't being passed through for some reason on my project, but when i create a new project it works? suffix_is_icon shows as 1 for x-mark icon when clearable is true.

select.blade.php

<div class="sticky top-0 min-w-full bg-slate-100 dark:bg-transparent py-1 pr-0 -pl-1 @if (!$searchable) hidden @endif"> <x-bladewind::input class="!border-0 !border-b !rounded-none focus:!border-slate-300 dark:focus:!border-slate-600 !w-full !text-sm bw_search" add_clearing="false" placeholder="Type here..." suffix="magnifying-glass" suffix_is_icon="true" /> </div>

input.blade.php: ` <div class="{{ $name }}-suffix suffix text-sm select-none pl-3.5 !pr-3 {{ $suffix_icon_div_css }} z-20 text-blue-900/50 dark:text-dark-400 absolute right-0 inset-y-0 inline-flex items-center @if (!$transparent_suffix) bg-slate-100 border-2 border-slate-200 border-l-0 dark:border-dark-700 dark:bg-dark-900/50 dark:border-l-0 rounded-tr-md rounded-br-md @endif" data-transparency="{{ $transparent_prefix }}">

suffix: {{ $suffix }}

suffix2: '{!! $suffix !!}'

suffix_is_icon: {{ $suffix_is_icon }}

        @if ($suffix_is_icon)
            <x-bladewind::icon name='{!! $suffix !!}' type="{{ $suffix_icon_type }}"
                class="!size-4 !stroke-2 !opacity-85 hover:!opacity-100 {{ $suffix_icon_css }}"
                action="{!! $action !!}" />

            {{-- this will be shown when user clicks to reveal password // so they can hide the password --}}
            @if ($type == 'password' && $viewable)
                <x-bladewind::icon name='eye-slash' type="{{ $suffix_icon_type }}"
                    class="!size-4 !stroke-2 !opacity-85 hover:!opacity-100 hide-pwd hidden"
                    action="togglePassword('{{ $name }}', 'hide')" />
            @endif
        @else
            {!! $suffix !!}
        @endif
    </div>`

    using "laravel/framework": "^8.0" on this project, whereas the example project i created to test is running "laravel/framework": "^11.9",

[mkocansey]

Thanks @Britishexchangestudent for throwing more light on this. Will try and fix this but no promises especially since support for Laravel 8 is coming to an end in a month or two. Things to do with how Laravel 8 interprets variable names with underscores.

Can you try this. Create an input field with an icon and set suffixIsIcon="true". Note how this attribute is defined as camel case.