docs(select): update storybook

Author: ozkersemih

src/components/select/bl-select.stories.mdx

@@ -132,6 +132,32 @@ export const SpecialUseCaseTemplate = () => html`<bl-select style="width: 50%" p
   <bl-select-option value="3">Option 3</bl-select-option>
 </bl-select>`;
 
+export const IconWithSlotTemplate = () => html`<bl-select placeholder="bl-select" label="aa">
+ <bl-select-option value="tr" label="Türkiye">
+      <div slot="icon" >
+        <img style="height: 1em;" src="https://www.worldometers.info//img/flags/small/tn_tu-flag.gif">
+      </div>
+   Turkiye
+ </bl-select-option>
+ <bl-select-option value="nl" label="Netherlands">
+   <div slot="icon">
+     <img style="height: 1em;" src="https://www.worldometers.info//img/flags/small/tn_nl-flag.gif">
+   </div>
+   Netherlands
+ </bl-select-option>
+ <bl-select-option value="nl" label="Netherlands">
+   <div slot="icon">
+     <img style="height: 1em;" src="https://www.worldometers.info//img/flags/small/tn_gm-flag.gif">
+   </div>
+   Germany
+ </bl-select-option>
+ <bl-select-option value="nl" label="Netherlands">
+   <div slot="icon">
+     <img style="height: 1em;" src="https://www.worldometers.info//img/flags/small/tn_uk-flag.gif">
+   </div>
+   United Kingdom
+ </bl-select-option></bl-select>`;
+
 export const SelectTemplate = (args) => html`<bl-select
     label=${ifDefined(args.label)}
     class=${ifDefined(args.class)}
@@ -355,6 +381,13 @@ If `bl-select-option` has icon by `icon` attribute, `bl-select` would render the
   </Story>
 </Canvas>
 
+You can use slot icon in `bl-select-option` instead of `icon` attribute to display icon on `bl-select`.
+<Canvas>
+  <Story name="Select With Icon Slots" args={{ options: optionsWithIcon, placeholder: "Choose Payment Method"  }} play={selectOpener}>
+    {IconWithSlotTemplate.bind({})}
+  </Story>
+</Canvas>
+
 ## `bl-select` Event
 
 Select component fires `bl-select` event once selection changes. This event has a payload in the type of