# Inputs.table\_County code to country icon

**URL:** <https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708>\
**Category:** Help\
**Created:** [October 17, 2021, 6:03pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708 "2021-10-17T18:03:03Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![amidsi](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/amidsi/32/5679_2.png) [@amidsi](https://talk.observablehq.com/u/amidsi)\
**Post date:** [October 17, 2021, 6:03pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/1 "2021-10-17T18:03:03Z")

</div>

Is there any way to represent country code (USA, ITA, CAN, etc.) to county’s flag as icon or emoji?

Example of my current table version is [here](https://observablehq.com/d/b6585ad7f58492dc)

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [October 17, 2021, 6:23pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/2 "2021-10-17T18:23:49Z")

</div>

A [search for flags](https://observablehq.com/search?query=flags) on Observable yielded this:

> **[Country Flags](https://observablehq.com/@danielkerrigan/country-flags)**
>
> These SVG flags are from the country-flags GitHub repository.

---

<div class="post-metadata">

**Author:** ![amidsi](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/amidsi/32/5679_2.png) [@amidsi](https://talk.observablehq.com/u/amidsi)\
**Post date:** [October 17, 2021, 6:32pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/3 "2021-10-17T18:32:44Z")

</div>

Yes, I saw this, but waht is the way to embed it into the table view?

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [October 19, 2021, 12:22am UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/4 "2021-10-19T00:22:08Z")

</div>

Here’s a notebook that can help:

> **[ISO 3166 Alpha-3 to Alpha-2](https://observablehq.com/@mbostock/iso-3166-alpha)**
>
> And Emoji flag conversion, too

To use in your notebook:

```auto
import {isoAlpha3toEmoji} from "@mbostock/iso-3166-alpha"

```

 ![Screen Shot 2021-10-18 at 5.21.56 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/0/08a6ad18ff4a3d9bd2c2d9d6494051938375c6a5.jpeg)

```auto
Inputs.table(perf, {
  format: {
    total_segment_score: sparkbar(d3.max(perf, d => d.total_segment_score)),
    total_element_score: sparkbar(d3.max(perf, d => d.total_element_score)),
    total_component_score: sparkbar(d3.max(perf, d => d.total_component_score)),
    nation: isoAlpha3toEmoji
  }
})

```

---

<div class="post-metadata">

**Author:** ![amidsi](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/amidsi/32/5679_2.png) [@amidsi](https://talk.observablehq.com/u/amidsi)\
**Post date:** [October 19, 2021, 8:32am UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/5 "2021-10-19T08:32:29Z")

</div>

It’s just convert from Alpha-3 to Alpha-2, but didn’t add Emoji itself (((  
Can you, pls, change and save code just inside my notebook: [Inputs.table\_County code to country icon / Dmitry S / Observable](https://observablehq.com/@amidsi/inputs-table_county-code-to-country-icon)  
I’ve already shared it with you )

---

<div class="post-metadata">

**Author:** ![duaneatat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/duaneatat/32/5654_2.png) [@duaneatat](https://talk.observablehq.com/u/duaneatat)\
**Post date:** [October 19, 2021, 2:29pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/6 "2021-10-19T14:29:15Z")

</div>

Hi Amidsi, I noticed that on your notebook you do indeed display the emoji flags, shall I mark the above response from mbostock as the solution?

---

<div class="post-metadata">

**Author:** ![amidsi](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/amidsi/32/5679_2.png) [@amidsi](https://talk.observablehq.com/u/amidsi)\
**Post date:** [October 19, 2021, 2:33pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/7 "2021-10-19T14:33:19Z")

</div>

Hi Duane!  
Not now, thank you, coz I still have issue and don’t have an idea how to fix it, now it’s looking like that:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/d/d936c8d7636989963dea68c5a26fa0616296bd83.png)

Then I’ll update status. Think it’ll be also important to know for society

---

<div class="post-metadata">

**Author:** ![duaneatat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/duaneatat/32/5654_2.png) [@duaneatat](https://talk.observablehq.com/u/duaneatat)\
**Post date:** [October 19, 2021, 2:36pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/8 "2021-10-19T14:36:26Z")

</div>

In the notebook that you shared above the icons are showing up correctly: [Inputs.table\_County code to country icon / Dmitry S / Observable](https://observablehq.com/@amidsi/inputs-table_county-code-to-country-icon)

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/1/1e281f227450dff65e5e852118062befce058f03.png)

Maybe you have unpublished changes that are somehow breaking the icons?

---

<div class="post-metadata">

**Author:** ![amidsi](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/amidsi/32/5679_2.png) [@amidsi](https://talk.observablehq.com/u/amidsi)\
**Post date:** [October 19, 2021, 2:40pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/9 "2021-10-19T14:40:37Z")

</div>

I’d sent you screenshot how it of how it is looking from my side. Though all changes are published

---

<div class="post-metadata">

**Author:** ![duaneatat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/duaneatat/32/5654_2.png) [@duaneatat](https://talk.observablehq.com/u/duaneatat)\
**Post date:** [October 19, 2021, 2:51pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/10 "2021-10-19T14:51:10Z")

</div>

Hmm, the code in your notebook looks correct, and the emoji icons are appearing so I’m at a bit of a loss as to what to suggest, unfortunately. The only thing I can think of is to confirm the following:

1. The notebook you’re referring to is [Inputs.table\_County code to country icon / Dmitry S / Observable](https://observablehq.com/@amidsi/inputs-table_county-code-to-country-icon)
2. You have no unpublished changes (the button in the header doesn’t say “Republish”)
3. You can see emoji icons on other notebooks (e.g. [ISO 3166 Alpha-3 to Alpha-2 / Mike Bostock / Observable](https://observablehq.com/@mbostock/iso-3166-alpha))

Thanks!

---

<div class="post-metadata">

**Author:** ![amidsi](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/amidsi/32/5679_2.png) [@amidsi](https://talk.observablehq.com/u/amidsi)\
**Post date:** [October 19, 2021, 3:00pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/11 "2021-10-19T15:00:54Z")

</div>

1. Yes
2. Yes  
 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/ae96a08b47a5b01d62977cc9e7b77b40e75c8838.png)
3. No  
 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/8/838f8230f0defd433f5bfdda946131498a9bbc6e.png)

---

<div class="post-metadata">

**Author:** ![duaneatat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/duaneatat/32/5654_2.png) [@duaneatat](https://talk.observablehq.com/u/duaneatat)\
**Post date:** [October 19, 2021, 3:16pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/12 "2021-10-19T15:16:09Z")

</div>

Ah, interesting. The fact that you can’t see the flag emoji on other notebooks made me look into how reliable this approach is, and indeed it is the case that this technique isn’t 100% effective and can fail due to variations in operating system, browser, etc. So if you need the flags to render for all contexts you’ll need to use a different approach (likely using images). Take a look at this stack overflow link for more info: [html - Flag Emojis not rendering - Stack Overflow](https://stackoverflow.com/questions/54519758/flag-emojis-not-rendering/54663926)

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [October 20, 2021, 8:22pm UTC](https://talk.observablehq.com/t/inputs-table-county-code-to-country-icon/5708/13 "2021-10-20T20:22:21Z")

</div>

Matt Dzugan ran into the same problem in [Making Maps out of Emojis / Matt Dzugan / Observable](https://observablehq.com/@mattdzugan/making-maps-out-of-emojis) ([related discussion](https://d3js.zulipchat.com/#narrow/stream/273728-geo/topic/Detecting.20.22Off.20the.20Map.22.20with.20projection.2Einvert.28.29/near/239627121)).

You could embed the icons as SVGs from [yammadev/flag-icons](https://github.com/yammadev/flag-icons), e.g.:

```auto
flag = code => html`<img src="https://raw.githubusercontent.com/yammadev/flag-icons/v3.0.0/svg/${code}.svg">`

```

```auto
flag("US")

```

![](https://raw.githubusercontent.com/yammadev/flag-icons/v3.0.0/svg/US.svg)